Firefox 对 margin-bottom 的解释是错误的。也许是一个错误？
这里是重现失败的最低版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
这是 Firefox 的一个 Bug 或者我误解了一些东西。 编辑： 忘记解释问题了。当我将 .row 的 margin-bottom 与 .col 中的浮点数结合使用时，该元素将被下拉，其值与 .row margin-bottom 具有相同的值
here a minimum version to reproduce the failure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
It is a Bug of Firefox or I misunderstand something.
Edit:
Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我不完全确定为什么 Firefox 的行为与其他浏览器不同。这与折叠边距有关。
但是，您可以通过以下方式轻松修复它（在 Firefox 中不会向下移动，浏览器之间保持一致）：
overflow:hidden添加到.row作为清除浮动的替代方法。然后，您可以删除
，因为不再需要它。I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.
However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:
overflow: hiddento.rowas an alternate way to clear the float.You can then remove the
<div class="clear"></div>because it's no longer required.这里看起来不错：
JSFiddle
您将需要
padding-bottom:30px;而不是margin-bottom:30px;Looks fine here:
JSFiddle
You will be wanting
padding-bottom:30px;instead ofmargin-bottom:30px;我认为你假设它应该在底部填充红行 30px ？那么你需要 padding-bottom 。 margin-bottom 会在 .row 和它下面的下一个元素之间放置 30px 的间隙。
检查这个小提琴了解我的意思
i think you are assuming that it should pad the red row 30px on the bottom? You want padding-bottom then. The margin-bottom will put a 30px gap between the .row and the next element underneath it.
check this fiddle for what I mean
没有失败
创建另一个 div 并在下面添加 class="row"，您将看到 margin-bottom：
there is no failure
make another div with class="row" underneath and you will see the margin-bottom:
我认为，他的问题是，当你使用 firebug 并使 margin-bottom 更大时......那么身体就会下降。
如果你使用高度，那么身体就不会下降。在 FF 3.6.15 中测试
或使用带边距的填充...然后主体不会向下移动。
在这里添加我的评论：
i think, the problem for him is, when you use firebug and make margin-bottom greater...then the body will go down.
If you use height then the body will not go down. Tested in FF 3.6.15
Or use padding with the margin...then the body do not move down.
Add to my comments here:
该问题与从正常流程中删除浮动元素有关，并且您期望该元素具有相同的行为。 Firefox 正在按其应有的方式行事。抱歉我没有时间解决这个问题。
The issue is related to floated elements being removed from the normal flow and you're expecting that element to act the same. Firefox is acting as it should. Sorry I don't have time to work this out.
三十点，你是对的 - 这是因为利润率下降。我也遇到过类似的情况。但是，你不能说这是FireFox独有的错误。事实上，在 Chrome 中，即使浮动没有被破坏，我的边距也不会折叠。另一方面，在 FireFox 中，尽管浮动破损（无论是溢出：隐藏/自动、之间清除的元素还是其他），边距对我来说还是崩溃了。有趣的是，子级和父级之间的边距崩溃了，根据 W3C 规范，这种情况是不应该发生的。此外，正填充解决了这个问题。
作为结论，我可以说没有浏览器 100% 符合 W3C/IEEE/ISO 标准。但是，我并不关心哪个浏览器符合哪个确切标准。重要的是它们都遵守相同标准。这并没有发生，而且我怀疑它永远不会发生。
thirtydot, you are right - this is because of collapsing margins. I was in a similar situation. However, you can't say that it's a bug of only FireFox. In fact, in Chrome, my margins didn't used to collapse even without the float being broken. In FireFox, on the other hand, the margins collapsed for me despite broken float (whether with overflow: hidden/auto, a cleared element between, or whatever). Funnily enough, the margins where collapsing between a child and a parent, which is not supposed to happen according to W3C specs. Moreover, a positive padding fixed this issue.
As a conclusion, I can say that no browser is 100% W3C/IEEE/ISO standards-compliant. However, I don't really care which browser complies to which exact standard. What matters is that they all comply to the same standard. This is not happening, and I doubt it ever will.