縦方向のマージンと、マージンの相殺と、背景色・背景画像の関係について、実装面から見てみる。自分自身がぜんぜん理解していなかったので、できれば避けたい話題だった。が、IE7(RC1)になっても怪しい挙動を見せているので、やるしかあるまい。
ここでは、ボックス(div要素)にブロック要素(h2やp)が入っている場合を考えてみる。どういうときに縦方向のマージンの相殺が起きて、そのとき背景色はどう反映されるかを見てみる。
相殺で怪しいケースが出てくるのは、divと中のブロック要素にmarginを指定し、divに縦方向のpaddingやborderを指定しないときである。このときは、divと他のdivとのマージンの相殺だけでなく、divと中のブロック要素とのマージンの相殺も発生する(はずである)。
なお、divに縦方向のpaddingやborderが入る場合は、divと中のブロック要素との相殺が起きなくなるので、それほど悩まなくてよい。また、divにposition:absoluteやfloat:left(or right)を指定する場合は、中のブロック要素やその他のdivとのmarginの相殺が起きないので、これも悩まなくてよくなる。
そこで、divに縦方向のpaddingやborderを指定しないケースに限定し、サンプルファイル:縦方向のマージンの実験に3パターン用意した。divに背景色とmargin: 40px、divの中にあるh2にmargin: 40px、pにmargin: 1emを指定し、縦方向のマージンで怪しい挙動を示すもの、示さないものを調べた。説明文に相殺される、相殺されない、が入り乱れてわかりにくいと思うが、見てほしい。
結果を概説。ケース(1)とケース(3)は同じ挙動だが、ケース(2)だけFirefox、Operaと、IEで挙動が変わる。divにwidthを指定した場合、FirefoxとOperaはdivと中のブロック要素との間でマージンの相殺が起きるのに、IE6、IE7ではマージンの相殺が起きない。相殺が起きず、div内の一番上にあるh2の上margin部分に背景色が適用される。また、一番下のpの下margin部分にも背景色が適用される。
divにwidthを指定しないケース(1)は、IEもdivと中のブロック要素とのマージンの相殺をする。ので、横幅を指定したことで変なことが起きている、と推測できる。
divにfloatとwidthを指定したケース(3)は、どれもブロック要素とのマージンの相殺を行わない。よって、ボックスの中の余白だけを見ると、FirefoxとOperaはケース(1)とケース(2)が同じ見た目に、IE6、IE7ではケース(2)とケース(3)が同じ見た目になる。
ここでの教訓は、IE7(RC1)の挙動を見るかぎりmarginの相殺は今後も疑ってかからないとならない、というものである。以前同様、IE7で先に見た目を調整してから他を見ると、悲しい結果になる恐れがある。横幅を指定したボックスに背景画像を指定し、見出しに上marginを指定して「あれ、IEではうまくいくのに、Firefoxでは背景画像が適用されないじゃん」みたいに悩む、というのは、いかにもありそうな話だ(というか、自分もよく躓いてました。えらそうに書いておいてごめんなさい)。
MYCOMのCSS実装徹底検証! そこが知りたいInternet Explorer 7にもあるように(これについてはあとでもうちっと見てみるつもりだが)、マージンの相殺がらみは山ほどおかしいところがある。楽な解決方法は、「君子危うきに近寄らず」だ。レイアウト上、ここがずれると困るところは、上下のmarginを0にし代わりにpaddingを指定して、相殺が起きてもおきなくても同じ見た目になるようにしてしまおう。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/573
まだよく理解していない部分があるので、あとでもうちょい直します。
不正確な記述を一部直しました。
ひっそりと読ませてもらってます。IE7でもいろいろと苦労させられそうですね。
質問なのですがXHTML1.1でMIMEタイプをapplication/xhtml+xmlにするとダウンロードになる問題はIE7で直りましたか?まだベータすら試してないので。
ところで自分の環境(XP)だとIE6でも普通に表示されるのが疑問です。確かダウンロードになるはずなのに…。
hiroさん、ありがとうございます。http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx (IEBlog)にあるように、サポートしないみたいです。でも、私のところでもなぜかダウンロードにはならず、表示されます。http://adp.daa.jp/archives/000455.html も見てみてください。
IEとFirefox等の違いを勉強しようと、
色んなサイトにお邪魔させてもらっています。
こちらでも色々と勉強させて頂きました。
ありがとうございます。