Question

这里是重现失败的最低版本：

<!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中的float组合时，该元素将被下拉为与.row margin-bottom具有相同的值

Answer 1

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

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

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

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

Answer 2

这里看起来很好：

enter image description here

JSFiddle

您需要padding-bottom:30px;而不是margin-bottom:30px;

Answer 3

我认为你假设它应该填充底部的红色30px？你想要填充底部。 margin-bottom将在.row和它下面的下一个元素之间留出30px的差距。

检查this fiddle我的意思

Answer 4

没有失败在下面创建另一个div =“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>

Answer 5

我认为，对他来说问题是，当你使用萤火虫并使边缘底部更大......那么身体会下降。

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

或者使用边距填充......然后身体不会向下移动。

在此处添加我的评论：

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

Answer 6

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

Answer 7

thirtydot ，你是对的 - 这是因为利润率下降。我处于类似的情况。但是，你不能说它只是FireFox的一个bug。事实上，在Chrome中，即使没有浮动，我的边缘也不会崩溃。另一方面，在FireFox中，尽管浮点数有所浮动，但边缘会崩溃（无论是溢出：隐藏/自动，清除元素还是其他）。有趣的是，在孩子和父母之间坍塌的边缘，根据W3C规范不应该发生。此外，积极的填充修复了这个问题。

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

Firefox解释了底边错误。也许是一个Bug？

7 个答案: