相同CSS width样式图片在Edge与Firefox显示不一致如何解决

该跨浏览器渲染差异是三类规则叠加触发的：

• 现在的Microsoft Edge是Chromium内核，和Firefox对**挂载CSS transform属性的替换元素（img标签）**的宽度计算逻辑存在原生实现差异
• wow.js初始化阶段会给所有绑定动画的元素默认添加visibility: hidden+初始transform偏移样式，animate.css的入场动画首帧也会给元素附加transform属性，刚好触发Firefox的宽度计算逻辑异常
• 你的hero图父容器没有显式声明宽度约束，Firefox计算width: 50%的参考基准时，没有取父容器的实际渲染宽度，反而错误参考了图片的原始固有尺寸，最终渲染尺寸和Chromium内核浏览器不一致。你改成width: 100%之后效果刚好对齐，本质是错误基准下的尺寸巧合，不是正确修复方式。

按优先级依次尝试，第一组规则就能覆盖绝大多数同类场景：

• 保留原有的width: 50%设置，给hero图片补充以下CSS属性：

/* 替换你原来的hero图片样式 */
.hero-banner-img {
  width: 50%;
  max-width: 50%;
  transform: translateZ(0);
  box-sizing: border-box;
  display: block;
}

translateZ(0)会强制元素触发独立GPU渲染层，让Firefox和Chromium内核统一以父容器实际宽度作为百分比计算基准；max-width: 50%锁死宽度上限，避免Firefox按图片原始尺寸溢出计算。

• 如果上述规则未完全生效，全局覆盖wow.js的默认初始样式，消除未入场阶段的transform对布局计算的干扰：

.wow {
  visibility: hidden !important;
  transform: none !important;
}
.wow.animated {
  visibility: visible !important;
}

wow.js默认会给未触发入场动画的元素加一个偏移transform做占位，Firefox在元素处于visibility: hidden状态时，会错误把这个transform的偏移量算入父容器宽度，导致百分比计算的基准值比实际大一圈，这也是你把width改成100%反而视觉对齐的核心原因——错误基准下的100%宽度，刚好等于正确基准下的50%渲染尺寸。

• 最后给hero图片的直接父容器补全布局约束，彻底消除宽度计算基准的歧义：

.hero-banner-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

避坑提示：不要给hero图片设置inline-block这类行内块属性，Firefox 118之前的版本对「行内块替换元素+transform动画」的组合存在已知兼容bug，会反复触发宽度计算异常。

修改后清空浏览器缓存，在Firefox中分别检查动画入场前、入场动画过程中、动画入场完成三个阶段的图片宽度，会和Edge下的渲染效果完全一致，不需要修改原有的50%宽度设置。

内容的提问来源于stack exchange，提问作者ALLAOUA Okba