[追記 / 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
けど理由が全くわからない。
どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ
多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい
ここら辺を理解できたら解決するのだろうか。。。?
Visual formatting model
Box model / 8.3.1 Collapsing margins
コメント