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

エ・ビスコム・テック・ラボ
2009-04-13 16:59:01
  • このエントリーをはてなブックマークに追加

　前回の「IE8で修正されたfloat関連のバグ その1」に続けて、IE8で修正されたfloat関連のバグを確認していきたい。

　なお、サンプルではIE8の互換表示ボタンを利用して、IE7とIE8のStandardsモード（標準準拠モード）で表示を比較していく。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。

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

　フロート要素の上下マージンが消える問題は、前回の3.で紹介したが、この問題で消えるのはデフォルトスタイルシートで挿入されるマージンだった。

　この他に、古いIEでは特定の条件下でmarginプロパティで指定した下マージンが消えるという問題が発生する。この問題はIE8で修正された。

　問題が発生していたのは、フロート要素にmarginまたはmargin-bottomで下マージンを指定し、親要素に横幅を指定した場合だ。たとえば、サンプル06では画像とキャプションを表示したフロート要素の下マージンを20ピクセルと指定し、親要素

の横幅を360ピクセルに指定している。

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

サンプル06

IE8の表示 IE8の表示
IE7の表示 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の表示 IE8の表示
IE7の表示 IE7の表示 
h2{
background-color: orange;
padding: 10px;
clear: both;
}

p#photo{
float: left;
}

見出し01


桜
キャプション


テキストテキストテキスト …略…



見出し02


桜
キャプション


テキストテキストテキスト …略…
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ