Firefox中绝对定位div无法正确获取子图片宽度的问题排查

在Chrome浏览器中，下述代码里的绿色.img-container div宽度会和子图片保持一致；但在Firefox浏览器中，该div的宽度为随机值，无法匹配子图片的宽度。由于图片宽度需支持动态变化，无法为.img-container设置固定宽度，请问此问题的原因是什么？

相关代码 #

CSS代码

.div1 {
  position: relative;
  padding-bottom: 25%;
  background: lightcoral;
}

.img-container {
  position: absolute;
  height: 100%;
  background: green;
}

.img1 {
  height: 100%;
  opacity: 50%;
}

HTML代码

<div class="div1">
  <div class="img-container">
    <img src="https://placehold.co/600x300" alt="" class="img1">
  </div>
</div>

原因分析 #

核心是不同浏览器内核对未设置宽度的绝对定位元素的宽度计算逻辑存在差异：

• Chrome基于WebKit/Blink内核，会对未显式设置宽度的绝对定位元素采用「收缩包裹」的计算方式，自动匹配子元素的固有尺寸，因此.img-container会被图片撑开，宽度和图片一致。
• Firefox遵循更严格的CSS规范：绝对定位元素未设置宽度时，默认会尝试取包含块的可用宽度。但你的.div1是通过padding-bottom:25%撑高的空容器，没有实际的内容宽度作为参考，导致Firefox无法确定.img-container的宽度，最终出现随机的不确定宽度。

另外，图片仅设置了height:100%，宽度未显式定义，在Firefox的计算逻辑中，没有明确宽度的绝对定位容器无法为图片提供宽度参考，图片的宽高比计算也无法反向撑开容器宽度，进一步加剧了这个问题。

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