
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ピクセルに指定している。
IE8の表示
IE7の表示
の見出しに対して、paddingプロパティでパディングを10ピクセルに指定している。これにclearプロパティを指定し、画像に対する回り込みを解除すると、古いIEでは「見出し02」の上パディングが指定よりも大きくなってしまうことがわかる。IE8では「見出し01」と「見出し02」のパディングに変化はなく、指定通り表示される。
すると、古いIEではフロート要素の下に余白が入らないのに対して、IE8では指定通り余白が挿入されることがわかる。なお、問題をわかりやすくするため、フロート要素以外の要素のマージンは0に指定してある。
サンプル06


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

キャプション
テキストテキストテキスト …略…
※ブラウザで表示を確認する


見出し01
キャプション
テキストテキストテキスト …略…
見出し02
キャプション
テキストテキストテキスト …略…
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
話題のセキュリティ事故体験ゲーム
-
企業DXのキモはクラウドにあり
-
利便性とセキュリティの両立
-
内部不正や不注意をどう防ぐ?
-
講演の見どころを紹介
-
いままさに社会にとっての転換点
-
いまさら聞けない「PPAP」
-
さあ、クラウドで解決しよう。
-
IDaaSって何?
-
ビッグデータ最前線!
-
セキュリティの今を知る
-
ゼロトラストに不可欠なID管理
-
連載!プロが語るストレージ戦略
-
デジタルを当たり前と言えるか?
-
いまあるデータで身近な業務をDX
-
請求書がきてからでは遅い
-
明日からではもう遅い?!
-
保育業界のDX(前編)
-
連載!プロが語るストレージ戦略
-
特集:IT最適化への道
-
データの散在と非常率運用がネック
-
次の一手はこれだ!
-
モバイルデバイスもターゲットに!
-
保育業界のDX(後編)
-
連載!プロが語るストレージ戦略