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

　すると、古いIEではフロート要素の下に余白が入らないのに対して、IE8では指定通り余白が挿入されることがわかる。なお、問題をわかりやすくするため、フロート要素以外の要素のマージンは0に指定してある。

サンプル06

IE8の表示

IE7の表示

h1{
margin:0;
}

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

p#photo{
float: left;
margin: 0 auto 20px;
}

p#text{
margin: 0;
}

#footer{
margin:0;
}

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

7. 回り込みを解除した要素の上パディングが大きくなる問題

　IE8では回り込みを解除した要素の上パディングが大きくなる問題が修正された。

　この問題は、paddingを指定した要素にclearプロパティを指定し、回り込みを解除すると発生していた。たとえば、サンプル07ではオレンジ色で表示した

の見出しに対して、paddingプロパティでパディングを10ピクセルに指定している。これにclearプロパティを指定し、画像に対する回り込みを解除すると、古いIEでは「見出し02」の上パディングが指定よりも大きくなってしまうことがわかる。IE8では「見出し01」と「見出し02」のパディングに変化はなく、指定通り表示される。

サンプル07

IE8の表示

IE7の表示

h2{
background-color: orange;
padding: 10px;
clear: both;
}

p#photo{
float: left;
}

見出し01

キャプション
テキストテキストテキスト …略…

見出し02

キャプション
テキストテキストテキスト …略…

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