【问题标题】：What is the most likely cause for FF and Chrome breaking a layout?FF 和 Chrome 破坏布局的最可能原因是什么？
【发布时间】：2011-10-11 11:22:38
【问题描述】：

问题

我在 WordPress 驱动的网站的“特色文章”部分看到了在当前版本的 Opera、Safari 和 IE6+ 中按预期呈现的内容，但在当前版本的 Chrome 和 FF 中出现了中断。

网站

该网站可以查看here。 “精选文章”部分显示在主页顶部。

我使用了 firebug 并通过 W3C 验证筛选了代码。虽然有很多错误，但我没有想到任何原因。

有人告诉我，代码在 Mac 上的所有浏览器中呈现一致，但在 PC 上却不是。

虽然我不代表该网站，也不是我的工作，但我只是想了解为什么会出现跨浏览器问题。

【问题讨论】：

什么坏了？我在 Chrome 12 和 IE9 中看起来完全一样。
正确呈现的代码将显示一个大缩略图堆叠在三个较小的缩略图之上。损坏的布局只是垂直堆叠四个缩略图。您是否阅读了我在帖子中“附加信息”下提到的内容？你的电脑是 Mac 吗？
是的，PC 上的 Chrome 12。看起来完全没问题。一张带有蝙蝠侠和知更鸟的大图，然后是三张水平排列在其下方的图片。
这很奇怪。我们使用相同的浏览器，我们每个人都在一台 PC 上，但我们却产生了不同的不同结果。我应该另外询问您是否使用的是 Windows 7。如果不是，通过排除过程，似乎操作系统是问题。
三台不同的 Windows 7 计算机，它们对我的渲染都是一样的。

【解决方案1】：

如果页面无效，那么浏览器会在渲染之前尽力修复它。在 chrome 中，您可以查看控制台输出，它可以告诉您它是如何选择解决问题的。由于每个浏览器的开发团队会选择以不同的方式解决问题，因此真的不值得研究为什么。现在，如果页面是有效的并且它们呈现不同，那么知道为什么会很有用。

【讨论】：

为洞察力干杯。无效代码是以怪异模式呈现的还是仅针对缺少的文档类型？
Quirksmode.org 进入了令人痛苦的细节。但一般规则是 doctype 用于确定严格模式。如果未指定 doctype，则假定为 strict。然后有例外的规则。然后当然是例外的例外。 quirksmode.org/css/quirksmode.html
为解释干杯虽然基于 mrtsherman 的反馈，但您知道为什么代码在具有相同浏览器版本的两台 PC 上呈现不同的原因吗？我尚未确定我和 mrtsherman 是否使用相同的操作系统。