Firefox 解释 margin-bottom 错误。也许是一个错误？答案

【问题标题】：Firefox interprets margin-bottom wrong. Maybe a Bug?Firefox 解释 margin-bottom 错误。也许是一个错误？
【发布时间】：2011-07-13 10:14:32
【问题描述】：

这里是重现故障的最低版本：

<!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 的错误，或者我误解了什么。编辑：忘记解释问题了。当我将 .row 的 margin-bottom 与 .col 中的 float 结合使用时，元素将被下拉到与 .row margin-bottom 相同的值

【问题讨论】：

也许您想解释一下您认为这是怎么回事？因为它似乎按我的预期工作。如果您描述了您期望它的表现，也许我们可以为您提供更多帮助。
问题不是到下一个元素的边距，问题是所有元素都向下移动了 30px。为了使失败更明显，将边距扩大到 300 像素
我不能，我需要使用边距。这是我的文档的缩小版，我需要边距。我只是不明白为什么尸体会掉下来
是的，你可以。你可以使用 margin-bottom 和 padding。

标签： css firefox margin

【解决方案1】：

我不完全确定为什么 Firefox 的行为与其他浏览器不同。这与collapsing margins有关。

但是，您可以通过以下方式轻松修复它（在 Firefox 中无需向下移动，浏览器之间的一致性）：

将overflow: hidden 添加到.row 作为清除浮动的替代方法。

然后您可以删除 <div class="clear"></div>，因为它不再需要。

【讨论】：

谢谢三十点，溢出隐藏解决了这个问题，但它也让它变得更加混乱。我希望有人能解释为什么会这样。
我会说这是一个 Firefox 错误，因为我测试过的其他浏览器都没有这样的行为。
我们是对的。这是自 2008 年以来 Firefox 的一个错误。To Bugzilla
感谢您的链接，很高兴知道这是一个错误。

【解决方案2】：

这里看起来不错：

JSFiddle

你会想要padding-bottom:30px; 而不是margin-bottom:30px;

【讨论】：

请参阅：jsfiddle.net/duTgV/2 - 这是一种 Firefox 与折叠边距有关的怪异现象。 jsFiddle 的 CSS 重置干扰了查看问题。看我的回答。
这是一个 firefox 错误，但解决方法实际上更好的是 overflow: hidden，因为您永远不知道其他地方的溢出取决于什么，但边距和填充几乎是相同的

【解决方案3】：

我认为您假设它应该在底部填充 30px 的红色行？那么你想要 padding-bottom 。 margin-bottom 将在 .row 和它下面的下一个元素之间放置 30px 的间隙。

检查this fiddle 我的意思

【讨论】：

【解决方案4】：

没有失败在下面创建另一个 class="row" 的 div，你会看到 margin-bottom：

<div class="row">
    <div class="col">Lorem Ipsum</div>
    <div class="clear"></div>
</div>
<!-- here is 30px space -->
<div class="row">
    <div class="col">Lorem Ipsum</div>
    <div class="clear"></div>
</div>

【讨论】：

问题是身体在移动，而不是边距不起作用
制作“幽灵”DOM元素本身就是失败

【解决方案5】：

我认为，他的问题是，当你使用 firebug 并让 margin-bottom 更大时......然后身体会下降。

如果你使用高度，那么身体就不会下降。在 FF 3.6.15 中测试

或者使用带边距的内边距...然后主体不要向下移动。

在此处添加到我的 cmets：

.row {
    background-color: red;
    margin-bottom: 30px;
    padding-bottom: 1px;
}

【讨论】：

我不能使用高度，因为 .row 和 .col 的内容是动态的
使用底部边距填充

【解决方案6】：

该问题与从正常流程中删除的浮动元素有关，并且您希望该元素的行为相同。 Firefox 正在发挥应有的作用。抱歉，我没有时间解决这个问题。

【讨论】：

【解决方案7】：

thirtydot，你是对的 - 这是因为折叠边距。我也有类似的情况。但是，你不能说这是一个只有 FireFox 的 bug。事实上，在 Chrome 中，即使浮动没有被破坏，我的边距也不会崩溃。另一方面，在 FireFox 中，尽管浮动中断（无论是溢出：隐藏/自动、之间的清除元素还是其他），边距对我来说还是崩溃了。有趣的是，孩子和父母之间的边距塌陷，根据 W3C 规范，这是不应该发生的。此外，一个正填充解决了这个问题。

作为结论，我可以说没有浏览器 100% 符合 W3C/IEEE/ISO 标准。但是，我并不真正关心哪个浏览器符合哪个确切标准。重要的是它们都符合相同标准。这不会发生，我怀疑它永远不会发生。

【讨论】：