[追記 / 20110323] コメント欄に別の対処法が2件あるよ
![[image]firefox / 上にmarginが付いてh1との間に隙間があいてる](/wp-content/uploads/2011/03/20110320_1.png "firefox / 上にmarginが付いてh1との間に隙間があいてる")
理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。
1 2 3 4 5 6 7 8 9 10 11 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /*すでに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> |
スクリーンショット
chrome
こうなって欲しい![[image]chrome / h1と#primaryに隙間は開かない](/wp-content/uploads/2011/03/20110320_2.png "chrome / h1と#primaryに隙間は開かない")
IE8
こうなって欲しい![[image]IE8 / chromeと同じ](/wp-content/uploads/2011/03/20110320_3.png "IE8 / chromeと同じ")
Firefox
なのにこうなる
原因と解決法を考える
結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。
1 2 3 | ul{ display:inline-block; } |
あれ、display:tableでも平気か？
Firefox
display追加するとこうなった。![[image]firefox / display:inlin-block;追加](/wp-content/uploads/2011/03/20110320_5.png "firefox / display:inlin-block;追加")
けど理由が全くわからない。
どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ
多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい
ここら辺を理解できたら解決するのだろうか。。。？
Visual formatting model
Box model / 8.3.1 Collapsing margins
ulにborderを付けてもmargin-topみたいな隙間は消える![[image]border付けた](/wp-content/uploads/2011/03/20110320_4.png "border付けた")
border使えない時はこれじゃダメだ。
いつもブログ拝見しております。
興味深い記事でしたので検証してみたところ、clearfixが原因のようでした。
overflow: hidden;を追加するとFirefox 3.6.15でも意図した表示になるようです。
ul:after {content : '';
display : block;
clear : both;
height: 0;
overflow: hidden; /* 追加 */
}
r.o.g.i.さん、はじめまして
検証ありがとうございます！
教えていただい方法でもmarginが消えました。
これは、overflowだけやるclearfixの挙動と
何か関係があるんですかねぇ
ul{
_zoom:1;
overflow:hidden;
}
また、display:inline-block;や
overflow:hidden;とは別の対処法として
height:0.01pxを指定する方法のサンプルページを
@hell2uさんが作成してくれました。
http://twitter.com/#!/hell2u/status/49313206925139970
ちなみに0じゃなかったらokなのかな？と
0.001pxを指定してみたところ
隙間が発生したので、単純に高さがあれば解決って話でもなさそうでした。
でもって、肝心の原因は、
r.o.g.i.さんが指摘されてる通り
clearfix(に使う:after{height:0;}でマージンがおかしくなるfirefoxのバグ)
みたいですね。
うちは、「clearfixには問題が無いだろう」と決めてかかってたので
原因を特定する事が出来なかった、というわけです、とほほ><;今後ともよろしくお願いします(m*_ _)mﾍﾟｺﾘ
まことさん、はじめまして
hell2uの紹介されているheight: 0.01px;なんかは発想になかったです。
ちなみに:afterにoverflow: hidden;を指定するなら、height: 0;はいらないようでした。
さらなる検証・解説ありがとうございました！こちらの方こそ今後ともよろしくお願いします。