Firefoxのボディマージンのバグ？

Question

私はこの単純な例があります。その後、100ピクセルの余白には、「セクション、

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> 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li class="clear"></li> 
    </ul> 
</header> 
<section>section</section> 

とCSSのこの作品は、 "予想通りに動作するが、Firefox（バージョン16）の「ヘッダー」では、何らかの理由で余分な余白が生じます。

これはバグですか？ここで

jsfiddle例：http://jsfiddle.net/AvZek/2/

ところで それがうまく働いているよりも、私が代わりに「クリア」クラスのclearfixを使用した場合。

あなたがこれを達成するために代わりにマージンの {padding-bottom:100px;}を使用することができます

Answer 1

これは、間違いなく、バグです。マージンは間違いなくそこにあるはずです。

• のFirebugによると、私が見ることができるという計算される唯一の非ゼロマージンがあなたのCSSのように、あなたのheader要素に同じmargin-bottom: 100pxです。それ以外はゼロです。

• FirebugのDOMインスペクタでもそれを識別できません。 html自体（コンテンツエリアの一部としてハイライト表示される）を検査しているときを除いて、その地域をハイライトしません。

多くのテストケースで、this oneの重複として閉じられた多数のバグレポートが見つかりました。さらに、少なくともFirefox 2以来の周りにあるように見えます。

Answer 2

..

Answer 3

代わりの非セマンティック、不要な空<li> -sを使用してコードを汚染するだけで、あなたの<ul>

HTMLにoverflow: hiddenを追加

<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