位置为绝对的 div 从子图像中获取错误的宽度，仅在 Firefox 中

Question

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

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

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

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

Chrome 结果（预期结果）：

Firefox 结果（错误结果）：

如您所见，在 Firefox 中，绿色 div 的宽度只是一些随机值，而不是其后代的宽度（我看不到它背后的任何逻辑）。

图像必须能够具有可变宽度，因此这个解决方案对我不起作用（无法在

.img-container

上设置固定宽度）。

我做错了什么？

Answer 1

Firefox 在绝对定位方面有点不同。尝试了解绝对位置的实际作用。如果父容器也是 100%，则具有 height: 100% 的 abs 的元素将完全覆盖

你还有一个垫底，我不明白为什么你需要垫底，这会让你的孩子显得更小。

尝试添加宽度：100%；到 img 容器。我在检查器中修改了你的代码。它似乎解决了它。尝试让我知道进展如何