
IE8で修正されたfloat関連のバグ その1
Internet Explorer 8(IE8)ではレイアウトに大きな影響を与えるfloat関連のバグが修正され、Firefoxなどのブラウザと同じ形でページを表示できるようになった。ここでは、floatプロパティが適用された要素を「フロート要素」と呼び、どのような問題が修正されたのかを確認していきたい。
なお、サンプルではIE8の互換表示ボタンを利用して、IE8とIE7のStandardsモード(標準準拠モード)で表示を比較していく。Standardsモードや互換表示ボタンについては第2回「IE8のレンダリングモードと互換表示」の記事を参照してほしい。
1. ボックスの高さの算出からフロート要素が除外されない問題
フロート要素を含むボックスの大きさは、フロート要素を除外して算出することになっている。しかし、古いIEではボックスに横幅や高さが指定してあると、フロート要素を含めて算出してしまうという問題があった。この問題はIE8で修正されている。
たとえば、サンプル01では
このサンプルを古いIEで表示すると親要素の高さにフロート要素が含まれてしまい、背景がカーキ色になっていた。一方、IE8ではカーキ色の背景が表示されることはなく、親要素の高さの算出からフロート要素が除外されていることがわかる。
サンプル01


#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


#left{ float: left; width: 160px; background-color: limegreen; } #right{ float: right; width: 160px; background-color: skyblue; }
ヘッダー左サイドのコンテンツ。…略…
右サイドのコンテンツ。…略…
※ブラウザで表示を確認する
なお、消えてしまうのはデフォルトスタイルシートで挿入されるマージンだけで、marginプロパティでマージンを指定すれば古いIEでも消えることはない。
- 新着記事
- 特集
- ブログ
- 企画特集
-
デジタルを当たり前と言えるか?
-
内部不正や不注意をどう防ぐ?
-
ビッグデータ最前線!
-
漫画で解説!運用管理のコツ
-
幸せ?不幸?ひとり情シス座談会
-
利便性とセキュリティの両立
-
特集:IT最適化への道
-
中小企業でのひとり情シスIT運用術
-
Kubernetesの認定制度が開始
-
ゼロトラストに不可欠なID管理
-
DXができない企業が滅びる理由
-
モバイルデバイスもターゲットに!
-
常識を疑え!
-
次の一手はこれだ!
-
連載!プロが語るストレージ戦略
-
明日からではもう遅い?!
-
話題のセキュリティ事故体験ゲーム
-
現場主導の業務変革のポイント
-
いままさに社会にとっての転換点
-
連載!プロが語るストレージ戦略
-
企業DXのキモはクラウドにあり
-
セキュリティの今を知る
-
さあ、クラウドで解決しよう。
-
連載!プロが語るストレージ戦略
-
講演の見どころを紹介
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]