firefoxでmargin-bottomがmargin-top

[追記 / 20110323] コメント欄に別の対処法が2件あるよ

理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。

[html classname=”html-sh”]<h1>h1-text</h1>
<div id="primary">
<div id="secondary">
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
<p>text</p>
[/html]
[css classname=”css-sh”]
/*すでにresetしてあるとして*/
body {
padding:20px;
}
h1 {
background:MistyRose;
}
#primary {
background:olive;
}
#secondary {
background:lavender;
margin-bottom:20px;
}
li {
float:left;
background:darkorange;
margin-right:10px;
}
p {
background:dimgray;
}
/* clearfix
————————- */
ul {
/zoom : 1;
}
ul:after {
content : ”;
display : block;
clear : both;
height:0;
}
</style>
[/css]

スクリーンショット

chrome

こうなって欲しい

IE8

こうなって欲しい

Firefox

なのにこうなる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。
[css classname=”css-sh”]
ul{
display:inline-block;
}
[/css]
あれ、display:tableでも平気か？

Firefox

display追加するとこうなった。

けど理由が全くわからない。

どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ

多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい

ここら辺を理解できたら解決するのだろうか。。。？
Visual formatting model
Box model / 8.3.1 Collapsing margins

ulにborderを付けてもmargin-topみたいな隙間は消える

border使えない時はこれじゃダメだ。