jquery - CSS — Firefox 给予 Chrome/Safari 完全不同的解释

Question

嗨 我真的很不明白为什么 Firefox 将我的页面渲染得如此错误

Link to problem page (尚未上线)

在 Chrome 和 Safari 中，它可以正常工作。另外，HTML 已验证，没有 jquery 错误。 通常 FF 并不遥远。然而，是的，框架的构造相当复杂。我嵌套了很多 div，并利用了

display:table

和

display:table-cell

属性。图像的尺寸也全部基于 parent 。它基本上是一个 super 流畅的居中布局，而且图像尺寸也很流畅(我正在尝试一些新的东西，所以也许它对我有用)

我猜测并希望可能只有一件愚蠢的事情 Firefox 不会以同样的方式解释。希望有人能为我带来一些启发。非常感谢

Answer 1

我对你的代码进行了一些实验，似乎 Firefox 不支持 position:relative 与 display: table-cell 或 display 结合使用:表。因此，您的定位上下文不会被重置，并且绝对定位的图像将相对于窗口的宽度而不是其容器的宽度进行缩放。我改变了这个...

<div class="imgContainer">
    <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div>
    <!-- Snip -->
</div>

...对此...

<div class="imgContainer">
    <div style="position: relative;">
        <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div>
        <!-- Snip -->
    </div>
</div>

...它开始看起来更像 Chrome 版本。基本上，您需要在表格单元格和绝对定位的缩略图之间有一个带有 position:relative 的中间 div 来重置定位上下文。至少这是巨大图像的原因。

编辑:

在这里，我fixed it for you 。如果您使用此源文件，请务必删除 header 中的 标记。