css - 边距影响 Firefox 中的其他对象

Question

如果您查看此页面，您会看到 3 个框 (div#threeBlockOnTop)，以及下方的一个长框 (div#squeeze)，其中包含随机内容。3 个框上方和下方的蓝色间隙应具有相同的大小（大约 30 像素）。但在 Firefox 中，这 3 个框之间的间隙更宽，因为出于某种奇怪的原因，它受到下面元素的上边距的影响。

如果你在 Firebug 中使用 div#squeeze 的 margin-top，你可以看到它如何改变上面 3 个框的位置。怎么了？这是否涉及 CSS 的某些合法属性，可以永久使用？

Answer 1

使用css 中的tramsform3d来提高性能

-webkit-transform:translate3d(-30px,0, 0);
-moz-transform:translate3d(-30px,0, 0);
transform:translate3d(-30px,0, 0);

这不会影响其他对象

并且不要忘记重置所有浏览器 每个浏览器都有他的重置样式和标准填充，边距，框大小......试试这个。

*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

我认为它与浏览器特定的css有关..尝试使用和删除用于firefox的-webkit-padding for chrome填充..-moz-pdding

Answer 3

<div class="clear"></div>的结束标记前有一个div#threeBlockOnTop。

它必须在此结束标记之后。