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

[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

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

スクリーンショット

chrome

こうなって欲しい
[image]chrome / h1と#primaryに隙間は開かない

IE8

こうなって欲しい
[image]IE8 / chromeと同じ

Firefox

なのにこうなる
[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。

あれ、display:tableでも平気か?

Firefox

display追加するとこうなった。
[image]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付けた
border使えない時はこれじゃダメだ。


5 thoughts on “firefoxでmargin-bottomがmargin-top

  1. いつもブログ拝見しております。
    興味深い記事でしたので検証してみたところ、clearfixが原因のようでした。

    overflow: hidden;を追加するとFirefox 3.6.15でも意図した表示になるようです。
    ul:after {
    content : '';
    display : block;
    clear : both;
    height: 0;
    overflow: hidden; /* 追加 */
    }

  2. 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ペコリ

  3. まことさん、はじめまして
    hell2uの紹介されているheight: 0.01px;なんかは発想になかったです。
    ちなみに:afterにoverflow: hidden;を指定するなら、height: 0;はいらないようでした。

    さらなる検証・解説ありがとうございました!こちらの方こそ今後ともよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.