喫茶LAPON-β

これは、IEのバグだけど、むしろ他のモダンブラウザもIEみたいに表示してくれたらいいのにな。みたいなバグです。

<div>（枠線を指定）
<div>（背景ピンクを指定）
<p>これはダミーの文章です</p>（背景グレーを指定）
<p>これはダミーの文章です</p>（背景グレーを指定）
</div>
</div>

私は
<p>これはダミーの文章です</p>（背景グレーを指定）
のpタグにそれぞmargin-top:20px;を指定しましたが、
IE以外のモダンブラウザでは
<div>（背景ピンクを指定）
にmargin-top:20px;が効いています。

サンプルはこちら。
IEとIE以外のブラウザの表示の違いを比べてみて下い☆

てな感じに、入れ子構造の時に
子要素にmargin-topを指定すると、
IEだと、親要素と子要素の間にmargin-topがきます。
IE以外のブラウザだと、親要素にmargin-topが効きます。

これを見たとき、IEの表示が正しい気がします。
しかし、CSSの仕様書には

「入れ子で隣接した親ボックスと子ボックスのマージンは結合されて一つになる。
（コンテンツやpadding、border、clearなどで分裂している時をのぞく）」

みたいなことが書いてあるのでIEの表示が間違いのようです。
Firefoxやオペラ、safari、chromeの表示が正しいようです。(意外だけど）

解決方法
(1)子要素のmarginをやめてpaddingにする。
(2)親要素にborderを指定する。
(3)positionを使う。

IE6、IE7しかチェックしてないけどIE8はどうなんだろう？？
CSSって不思議。

詳しくはこちら。CSS仕様書についても詳しく書いてあります。
【CSS Tips】ネストされたボックス要素のmargin-topのブラウザ毎の解釈の違い－Margin Collapsing