Chrome乱了网站布局，FF和IE都不错答案

【问题标题】：Chrome messes up the website layout, FF and IE is goodChrome乱了网站布局，FF和IE都不错
【发布时间】：2012-02-24 00:26:25
【问题描述】：

我正在开发一个网站：http://www.bbp.nl/luuk-test/wac 它在 FF 和 IE 上显示得非常好。我去 Chrome 中测试它，它完全搞砸了。不知何故，Chrome 将所有 div 显示在彼此下方。我真的不知道去哪里找，因为它在 W3C 验证器中也得到了很好的验证。

也用谷歌搜索了它，但找不到任何东西。有人知道答案吗？请帮忙。

【问题讨论】：

它是否有效？ FF 倾向于在显示代码之前对其进行整理。
要么你刚才对站点做了什么，要么布局有根本性的问题。我在 Fx 3.6 中检查了它，它也完全搞砸了。如果该站点仅在 IE 中运行，则表明该布局依赖于 IE 错误来按预期显示。

标签： html css layout google-chrome

【解决方案1】：

您在样式表的第 20 行为您的 div 使用 -moz-box-sizing 来更改为 mozilla 浏览器计算的框大小。这在 chrome 中无法识别。

见：https://developer.mozilla.org/en/CSS/-moz-box-sizing

您也可以使用 webkit 为浏览器应用修复：

分区 { box-sizing：边框框； -moz-box-sizing：边框框； -webkit-box-sizing：边框框； }

在我看来，更好的方法是在没有这种解决方法的情况下让您的网站看起来不错，并根据所需大小减去填充来计算您的框大小。

【讨论】：

所以在这个问题上没有像我在 firefox 上找到的那样解决 chrome 问题？
如果您想继续使用此修复程序，请尝试使用：-moz-box-sizing:border-box;框尺寸：边框框； -webkit-box-sizing:border-box;

【解决方案2】：

首先，如果您的 HTML 更易于阅读，将会很有用。

您在第 41 行打开了一个段落标签，也许这就是问题所在？

【讨论】：

我也找不到在第 41 行打开的段落的结束标记。确保您的 HTML 有效并在像 browsershots.org 这样的网站上进行测试非常重要。

【解决方案3】：

为 Firefox 获取这个插件，它会告诉你页面上的所有错误...包括 Machiel 提到的开放式标签...

https://addons.mozilla.org/en-US/firefox/addon/249

【讨论】：

不是P，我把它去掉了，看来它选择在div的外面而不是里面添加padding

【解决方案4】：

在你的 CSS 中，你有：

box-sizing: border-box;
-moz-box-sizing: border-box;

要在 WebKit (Chrome/Safari) 中使用此功能，请使用 -webkit-box-sizing

-webkit-box-sizing: border-box;

【讨论】：

【解决方案5】：

我会完全删除那些 box-sizing 属性，并使用更合规的属性，如 padding、margin、width 和 height 来调整大小。

【讨论】：

【解决方案6】：

Chrome 不支持 box-sizing，这很烦人，因为它是 CSS3 的一部分。

如果您为 DIV 指定 100% 的边距，然后给它一个边框和 5px 的边距（例如），就会出现问题。将 box-sizing 设置为 border-box，你会得到一个很好的缩进 DIV。如果没有盒子大小，div 就会溢出。现在，您可以通过使用包装器 DIV 来解决它，但那是额外的标记，或者通过以像素为单位指定宽度，但如果您不知道宽度，这将不起作用。

【讨论】：