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 中的 标记。