Firefox 正文边距错误？

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;
}

因此，预计“标题”会直接到达左上角，然后是 100 像素边距，然后是“部分”。在所有主要浏览器中都按预期工作，但在 Firefox（版本 16）中，“标题”由于某种原因获得额外的边距顶部。

这是一个错误吗？

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

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

Answer 1

毫无疑问，这是一个错误。边距绝对不应该存在。

• 根据 Firebug，我可以看到计算出的唯一非零边距与

  margin-bottom: 100px

  元素上的

  header

  与 CSS 中的相同。其他一切都是零。

• 即使 Firebug 的 DOM 检查器也难以识别它；它从不突出显示该区域，但当您检查

  html

  本身时（它突出显示为内容区域的一部分），这是一个明显的例外。

我发现了大量的错误报告，这些报告作为这个报告的重复项而被关闭，还有更多的测试用例。另外，它看起来至少从 Firefox 2 就已经存在了。

Answer 2

不要用非语义和不必要的空

<li>

-s 污染您的代码，只需将

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;
}

演示

Answer 3

您可以使用

{padding-bottom:100px;}

代替边距来实现此目的..