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

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

这是一个错误吗？

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

BTW如果我使用clearfix而不是"clear"类而不是它正常工作.

Answer 1

毫无疑问,这是一个错误.绝对不应该存在边际.

• 根据Firebug,我能看到的唯一非零余量是margin-bottom: 100px你的header元素和你的CSS一样.其他一切都是零.

• 甚至Firebug的DOM检查员都难以识别它; 它从不突出显示该区域,除了您正在检查html自身时(它突出显示为其内容区域的一部分).

我发现大量的bug报告都被关闭了,因为这个报告有很多,还有更多的测试用例.此外,它看起来至少从Firefox 2开始.