火狐体余量的错误？(Firefox body margin bug?)

我有这个简单的例子：

<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版）“头”所有主要的浏览器获得额外的margin-top出于某种原因。

这是一个错误？

这里的的jsfiddle例如： http://jsfiddle.net/AvZek/2/

BTW如果我用来代替“清”级clearfix比它的工作就好了。

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

DEMO

Answer 3:

您可以使用{padding-bottom:100px;}而不是利润率达到这个..

文章来源: Firefox body margin bug?