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

我希望“header”直接到达左上角，然后是100像素的外边距，然后是“section”。在所有主要浏览器中都可以按预期工作，但在Firefox（版本16）中，“header”因某种原因获得了额外的margin-top。

这是一个bug吗？

这里有一个jsfiddle示例：http://jsfiddle.net/AvZek/2/ 顺便说一句，如果我使用clearfix而不是“clear”类，那么它就可以正常工作。

- Andrew Terentyev

---

我不是在寻找解决方法，我只是想知道这是一个错误还是我没有理解的行为。 - Andrew Terentyev

Answer 1

毫无疑问，这是一个bug。这个margin明显不应该存在。

• 根据Firebug显示的结果，唯一一个非0的margin出现在header元素上，就像你在CSS中设置的一样，margin-bottom: 100px。其他的都是0。

• 即使是Firebug的DOM检查器也很难识别它；它从来没有突出显示过那个区域，除了当你检查html本身时（它会将其突出显示为内容区域的一部分）。

我发现有很多bug报告都被关闭了，并指向这个，还有很多其他的测试案例。此外，它看起来至少存在于Firefox 2。

- BoltClock

---

非常感谢您的回答。这正是我想知道的。 - Andrew Terentyev

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

- Zoltan Toth

Answer 3

你可以使用{padding-bottom:100px;}代替margin来实现这个效果..

- Abdul Malik

---

谢谢你的回答。我知道如何避免这个问题。我想知道这是一个错误还是我不理解的行为。 - Andrew Terentyev