Question

我正在网站上工作：http://www.bbp.nl/luuk-test/wac 它在FF和IE上显示得非常好。我去Chrome测试它，它完全搞砸了。 Chrome会以某种方式显示彼此之下的所有div。我真的不知道在哪里看，因为它也在W3C验证器中得到了很好的验证。

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

Answer 1

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

请参阅：https://developer.mozilla.org/en/CSS/-moz-box-sizing

您也可以使用webkit对浏览器应用此修复程序：

div {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box; 
}

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

Answer 2

首先，如果您的HTML更易于阅读，那将非常有用。

你在第41行打开一个段落标记，也许这就是问题？

Answer 3

获取firefox的这个附加组件，它会告诉您页面上的所有错误...包括开放式＆lt; -p-＆gt;标签为Machiel提到......

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

Answer 4

在你的CSS中，你有：

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

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

-webkit-box-sizing: border-box;

Answer 5

我会完全删除那些盒子大小的属性，并使用更多兼容的属性，如填充，边距，宽度和高度来确定大小。

Answer 6

Chrome不支持大小调整，这很烦人，因为它是CSS3的一部分。

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

Chrome搞砸网站布局，FF和IE很好

6 个答案: