Question

您好我真的不知道为什么Firefox正在渲染我的页面，所以错误

Link to problem page（尚未生效）

在Chrome和Safari中，它可以正常工作。另外，HTML验证，没有jquery错误。通常情况下，FF并不遥远。但是，是的，框架的控制非常复杂。我正在筑巢很多div，并使用

显示：表

和

显示：表细胞

性质。图像的大小也都基于父母。它基本上是一个超流体为中心的布局，图像尺寸的额外好处也是流动的（我在这里尝试新的东西，所以也许它对我有用）

我猜测并且希望Firefox可能只有一个愚蠢的东西以同样的方式解释。希望有人可能会为我提供一些启示。非常感谢

Answer 1

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

<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版本。基本上你需要一个中间div，在你的表格单元格和绝对定位的缩略图之间加position: relative来重置定位上下文。这至少是巨型影像的原因。

修改

在这里，我fixed it for you。请务必删除＆lt; BASE＆gt;如果您使用此源文件，则在标题中标记。

Answer 2

您出于思想原因使用CSS。任何明智的人都会使用桌子。

Answer 3

你为什么不用桌子呢？使用表来布局您的网站结构是唯一不好的。为了您的目的，这正是为...而设计的。

看起来你在html中使用内联样式。你为什么不使用样式表和类？我以为我们在回答你的上一个问题时已经清除了这一切？

Answer 4

嗯... .tableMaker > .imgContainer > .thumbnail宽度为100％是部分罪魁祸首，在我看来。将它们切换到设定值，而不是百分比。（那种风格是html，而不是css，fyi）

Answer 5

出于某种原因，firefox会阻塞你图像的100％值，例如：<img width="100%"如果你明确设置了这个值，它似乎有效。

CSS - Firefox为Chrome / Safari提供了完全不同的解释

5 个答案: