Question

我有一个简单的例子：

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li class="clear"></li>
    </ul>
</header>
<section>section</section>

这片css：

BODY, HTML{
    margin: 0;
}
header{
    margin-bottom: 100px; /* section goes down */
}
UL{
    list-style-type: none;
}
UL LI{
    float: left;
    background: green;
}
.clear{
    clear: both;
    float: none;
}
section{
    background: red;
}

所以我希望“标题”直接进入左上角，然后是100px边距，然后是“部分”。在所有主流浏览器中，按预期工作，但在Firefox（版本16）中，“标题”由于某种原因获得额外的保证金。

这是一个错误吗？

这里有一个jsfiddle示例：http://jsfiddle.net/AvZek/2/

顺便说一句如果我使用clearfix而不是“clear”类，那么它的工作正常。

Answer 1

毫无疑问，这是一个错误。绝对不应该留在那里。

根据Firebug，我可以看到的唯一非零边距与margin-bottom: 100px元素上的header相同。其他一切都是零。
即使是Firebug的DOM检查员也无法识别它;它从不突出显示该区域，除了您正在检查html本身（它突出显示为其内容区域的一部分）时，显而易见。

我发现大量的错误报告被关闭为this one的副本，还有更多的测试用例。此外，看起来至少从Firefox 2开始就已存在。

Answer 2

不要使用非语义和不必要的空<li>来污染代码，而只需将overflow: hidden添加到<ul>

的 HTML 的

<header> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </header> <section>section</section>

的 CSS 的

ul { list-style-type: none; overflow: hidden; }

DEMO

Answer 3

您可以使用{padding-bottom:100px;}代替保证金来实现这一目标。

Firefox身体边缘错误？

3 个答案: