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

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

8. 複数の要素にfloatやclearを指定したときに表示位置がおかしくなる問題

 IE8では複数の要素にfloatやclearプロパティを指定したときに表示位置がおかしくなる問題が修正された。

 サンプル08では、A〜Eの5つのボックスに対してfloat:leftと指定し、このうちBとDにはclearプロパティで回り込みの解除を指定している。

 floatの処理では、後から記述した要素がfloat:leftと指定した要素の右側または下側に表示されることになっており、回り込みを解除した場合は下側に表示される。そのため、IE8のようにBとC、DとEが横に並ぶのが正しい表示となるが、古いIEではCとEがAと並んで表示されるという問題があった。

サンプル08

IE8の表示 IE8の表示
IE7の表示 IE7の表示
#a{float:left;
background-color:pink}

#b{float:left;
background-color:red;
clear:left}

#c{float:left;
background-color:orange}

#d{float:left;
background-color:yellow;
clear:left}

#e{float:left;
background-color:skyblue}
A
B
C
D
E
ブラウザで表示を確認する

9. 横幅がオーバーした要素の回り込みが解除される問題

 フロート要素に回り込んでいる要素が親要素の横幅をオーバーした場合、古いIEでは回り込みが解除されるという問題があった。IE8ではこの問題は修正されている。

 たとえば、サンプル09では赤い枠で囲んだコンテンツにfloatプロパティを指定し、青い枠で囲んだコンテンツを回り込ませてレイアウトしている。しかし、青い枠のコンテンツは横幅が長く、カーキ色で示した親要素の横幅からオーバーしてしまう。

 このとき、古いIEでは青い枠のコンテンツの回り込みが解除され、左サイドのコンテンツよりも下側に表示されるという問題が発生していたが、IE8では赤い枠のコンテンツの右側に並べて表示されるようになっている。

サンプル09

IE8の表示 IE8の表示
IE7の表示 IE7の表示
#container{
background-color:khaki;
width:360px
}

#left{
float: left;
width: 160px;
border: solid 2px red;
}

#right{
width: 300px;
margin-left: 170px;
border: solid 2px blue;
}
左サイドのコンテンツ。…略…
ブラウザで表示を確認する

 次回はIE8で修正されたfloat関連以外のバグについてまとめていく。背景やマージン、位置指定関連など、レイアウトに影響する細かな修正がなされている。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]