Firefox 正文页边距错误？

Posted 2023-03-06

【中文标题】Firefox 正文页边距错误？

【英文标题】：Firefox body margin bug?

【发布时间】：2012-10-15 18:10:21

【问题描述】：

我有一个简单的例子：

<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）中，“标题”由于某种原因会获得额外的 margin-top。

这是一个错误吗？

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

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

【问题讨论】：

我不是在寻找解决方法，只要这是一个错误，或者只是我不理解的行为，我都会感兴趣。

【参考方案1】：

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

根据 Firebug，我可以看到的唯一非零边距是与 CSS 中的 header 元素上的 margin-bottom: 100px 相同。其他一切都是零。

即使是 Firebug 的 DOM 检查器也无法识别它；它从不突出显示该区域，除非您检查 html 本身（它作为其内容区域的一部分突出显示）。

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

【讨论】：

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

【参考方案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;

DEMO

【参考方案3】：

你可以使用padding-bottom:100px;而不是margin来实现这个..

【讨论】：

感谢您的回答。我知道如何避免这个问题。只要这是一个错误，或者只是我不理解的行为，我都会感兴趣。