Firefox body margin bug?

Question

I have this simple example:

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li class="clear"></li>
    </ul>
</header>
<section>section</section>

And this piece of 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;
}

So I expecting to "header" goes straight to top-left corner, then 100px margin, then "section". In all major browsers that works as expected, but in Firefox (version 16) "header" get extra margin-top for some reason.

Is this a bug?

Here an jsfiddle example: http://jsfiddle.net/AvZek/2/

BTW If I used clearfix instead of "clear" class than it's working just fine.

Answer 1

This is, without a doubt, a bug. The margin is definitely not supposed to be there.

• According to Firebug, the only non-zero margin that is computed that I can see is the same margin-bottom: 100px on your header element as in your CSS. Everything else is zero.

• Even Firebug's DOM inspector has trouble identifying it; it never highlights that region, with the obvious exception of when you're inspecting html itself (which it highlights as part of its content area).

I found tons of bug reports which were closed as duplicates of this one , with numerous more test cases. Plus, it looks like it has been around since at least Firefox 2.

Answer 2

Instead of polluting your code with non-semantic and unnecessary empty <li> -s just add overflow: hidden to your <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;}而不是margin来实现此目的..