边距影响 Firefox 中的其他对象答案

【问题标题】：Margin affects other objects in Firefox边距影响 Firefox 中的其他对象
【发布时间】：2013-08-06 04:29:15
【问题描述】：

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

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

【问题讨论】：

标签： css firefox margin

【解决方案1】：

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

【讨论】：

-webkit 不适用于 Firefox 浏览器。请检查你的答案。

【解决方案2】：

使用来自 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/

【讨论】：

div#squeeze { -webkit-transform:translate3d(0,30px, 0); -moz-transform:translate3d(0,30px, 0); transform:translate3d(0,30px, 0); margin-bottom:30px; }
（WTH？我不能在 cmets 中编写代码块？）我在最后一条评论中发布的内容适用于所有浏览器——除了现在的 Crome。实际的问题是：那个页面有什么问题，正常的 CSS 不起作用？这只是一堆盒子，它们之间应该有一些差距。显然是普通旧 CSS 的工作。
嗨 mate2code 我不知道发生了什么，但如果我的回答是您问题的解决方案，如果您投票，那就太好了，否则请再次解释，以便我们找到解决方案
嗨 kougiland。问题是 Firefox 中的still visible，您的回答没有帮助。您可以看到，3 个框上方和下方的间隙总和太大。 translate 现在可用于将 3 个框向上移动一点，因此两个间隙至少具有相同的大小。但这不是解决方案，因为它们仍然太大。与解决方案相比，我更感兴趣的是隔离问题，即构建具有相同行为的元素很少的东西。如果你能做到这一点，我会像解决方案一样支持它:)
es leigt daran, dass du nicht -webkit-box-sizing:border-box; benutzt viele gruesse

【解决方案3】：

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

它必须在这个结束标记之后。

【讨论】：