8(IE8)ではレイアウトに大きな影響を与えるfloat関連のバグが修正され、Firefoxなどのブラウザと同じ形でページを表示できるようになった。ここでは、floatプロパティが適用された要素を「フロート要素」と呼び、どのような問題が修正されたのかを確認していきたい。サンプルではIE8の互換表示ボタンを利用して、IE8とIE7のStandardsモード(標準準拠モード)で表示を比較していく。Standardsモードや互換表示ボタンについては第2回「IE8のレンダリングモードと互換表示」の記事を参照してほしい。ボックスの高さの算出からフロート要素が除外されない問題フロート要素を含むボックスの大きさは、フロート要素を除外して算出することになっている。古いIEではボックスに横幅や高さが指定してあると、フロート要素を含めて算出してしまうという問題があった。この問題はIE8で修正されている。サンプル01ではとにfloatプロパティを適用して、テキストを2段組みで表示している。全体をマークアップした親要素の背景はカーキ色に指定してある。このサンプルを古いIEで表示すると親要素の高さにフロート要素が含まれてしまい、背景がカーキ色になっていた。IE8ではカーキ色の背景が表示されることはなく、親要素の高さの算出からフロート要素が除外されていることがわかる。160px;}左サイドのコンテンツ。...略...右サイドのコンテンツ。フロート要素の子要素の上下マージンが消える問題IE8では、フロート要素の中に記述した最初の子要素の上マージンと、最後の子要素の下マージンが消えるという問題が修正された。サンプル02では2段組みでレイアウトしたフロート要素の中にでマークアップしたテキストを記述してある。上下にはデフォルトスタイルシートによって約1.33emのマージンが挿入されるが、古いIEではこのマージンが消えてしまっていた。IE8ではテキストの上下にマージンが入っていることがわかる。左サイドのコンテンツ。...略...右サイドのコンテンツ。※ブラウザで表示を確認するなお、消えてしまうのはデフォルトスタイルシートで挿入されるマージンだけで、marginプロパティでマージンを指定すれば古いIEでも消えることはない。HAキャンペーンサイバー攻撃から顧客の重要情報を守る。permission.×このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。