Jquery CSS—；Firefox对Chrome/Safari的解释完全不同

嗨 我真的不明白为什么Firefox会把我的页面呈现得如此错误

（还没有直播）

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

显示：表格

及

显示：表格单元格

财产。图像的大小也都基于父母。它基本上是一个以流体为中心的超级布局，图像大小也是流体的（我正在尝试一些新的东西，所以也许它适合我）

---

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

你为什么不用桌子呢？使用表格来布局网站结构是不好的。出于您的目的，这正是设计的目的

---

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

.tableMaker>.imgContainer>.thumbnail

在我看来，宽度为100%是部分罪魁祸首。将它们切换为设定值，而不是百分比。（该样式是html格式，不是css，仅供参考）

出于某种原因，firefox对您的图像的100%值感到窒息，例如：

您使用css是出于理想的原因。任何明智的人都会使用表格。
我对您的代码进行了一些实验，Firefox似乎不支持将
位置：相对
与
显示：表格单元格
或
显示：表格
结合使用。因此，您的定位上下文没有被重置，绝对定位的图像是相对于窗口的宽度而不是其容器的宽度进行缩放的。我改变了这个

<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
，以重置定位上下文。至少，这是造成巨大图像的原因

编辑：

给，我。如果使用此源文件，请确保删除标题中的标记。
Yikes！那很不一样，奇怪吗？这是一种我不知道从哪里开始寻找问题的情况！特别是当html验证并且没有脚本错误时。已修复：。请看我下面的答案，这是为什么。对不起，你说的那种样式是HTML而不是css是什么意思？我同意这一定是100%的事情。但如果它在webkit中起作用，它就应该起作用。Grr。“我会坚持下去的。”菲利普·希尔德：我不同意。使用CSS，他可以将它们以任何可见的格式放置，而不仅仅是列和行。他只是过度复杂了他的CSS，并没有完全理解他在做什么。@RGBK我的意思是你在html代码中将宽度设置为100%，比如
，我指的不是CSS样式。我之所以写这句话，是因为我使用了css使用的选择器语法来澄清我所说的元素。至少在Chrome中，img标记中的width=“100%”会导致缩略图随窗口大小缩放（在Chrome中加载示例URL，然后缩小/扩大窗口）。我觉得效果有点酷，我可以理解他为什么想在Firefox中复制它。@joshua这是我将要研究的另一个Chrome bug：当我缩小它时，它会闪烁。在狩猎中，它像丝绸一样光滑。对于另一篇帖子或谷歌搜索，一旦我对这篇FF文章进行排序，可以尝试。。。但是css。。。那在css文件中？！（对不起，愤怒的猫！）@RGBK，我不知道你是从哪里生气的，我不是故意这么说的。如果你说的是我的最后一句话，我记得我给了你一个链接到yahoo开发者最佳实践页面，我想知道为什么读完后你还在写CSS内联。哈哈。。。你说得太对了。好的，我要做一些桌子。嗯，虽然我收回了。。。更改浏览器窗口的大小，divs向左浮动，并在jquery中设置的特定浏览器大小标记处展开，我认为我不能对表执行此操作，对吗？这就是我最初选择Div的原因。如果我在功能上有错误，请纠正我，干杯。非常感谢你，这完全解决了问题。我确信有一件小事可以解决它。干杯