IE8で修正されたfloat関連のバグ その1

　このサンプルを古いIEで表示すると親要素の高さにフロート要素が含まれてしまい、背景がカーキ色になっていた。一方、IE8ではカーキ色の背景が表示されることはなく、親要素の高さの算出からフロート要素が除外されていることがわかる。

サンプル01

IE8の表示

IE7の表示

#container{
background-color:khaki;
width:360px
}

#left{
float: left;
width: 160px;
}

#right{
float: right;
width: 160px;
}

左サイドのコンテンツ。…略…



右サイドのコンテンツ。…略…

※ブラウザで表示を確認する

2. フロート要素の子要素の上下マージンが消える問題

　IE8では、フロート要素の中に記述した最初の子要素の上マージンと、最後の子要素の下マージンが消えるという問題が修正された。

　たとえば、サンプル02では2段組みでレイアウトしたフロート要素の中に

でマークアップしたテキストを記述してある。

の上下にはデフォルトスタイルシートによって約1.33emのマージンが挿入されるが、古いIEではこのマージンが消えてしまっていた。IE8ではテキストの上下にマージンが入っていることがわかる。

サンプル02

IE8の表示

IE7の表示

#left{
float: left;
width: 160px;
background-color: limegreen;
}

#right{
float: right;
width: 160px;
background-color: skyblue;
}

ヘッダー


左サイドのコンテンツ。…略…



右サイドのコンテンツ。…略…


フッター

※ブラウザで表示を確認する

　なお、消えてしまうのはデフォルトスタイルシートで挿入されるマージンだけで、marginプロパティでマージンを指定すれば古いIEでも消えることはない。