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

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

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

 IE8では、フロート要素の上下マージンが消えるという問題も修正されている。

 たとえば、サンプル03は画像とキャプションを記述した

にfloatプロパティを指定して、テキストを右側に回り込ませてレイアウトしたものだ。このとき、

の上下にはデフォルトスタイルシートによって約1.33emのマージンが挿入されるが、古いIEではマージンが消えてしまっていた。IE8では画像とキャプションを囲んだ赤い枠の上下にマージンが入ることがわかる。

サンプル03

IE8の表示 IE8の表示
IE7の表示 IE7の表示
p#photo{
float: left;
border: solid 1px red;
background-color: white;
padding: 5px;
text-align:center;
}

桜
キャプション

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

ブラウザで表示を確認する

 なお、消えてしまうのはデフォルトスタイルシートで挿入されるマージンだけで、marginプロパティでマージンを指定すれば古いIEでも消えることはない。

4. フロート要素に隣接する要素の上マージンの折り畳みに関する問題

 特殊なケースとなるが、通常、floatプロパティを適用していない要素とその親要素にマージンを指定した場合、指定したマージンのうち大きな値が採用される。

 たとえば、サンプル04ではすべての要素のマージンを0にして、テキスト部分の上下にだけ20ピクセルのマージンを指定している。すると、IE8の表示のように見出しの下とフッターの上に20ピクセルの余白が挿入される。

 しかし、古いIEでは見出しの下に余白が入らないという問題が発生していた。この問題は、サンプル04のようにテキスト部分がフロート要素に隣接して記述されている場合に発生する。

サンプル04

IE8の表示 IE8の表示
IE7の表示 IE7の表示
h1{
margin:0;
}

#container{
background-color: khaki;
margin:0;
}

p#photo{
float: left;
margin:0;
}

p#text{
margin: 20px auto;
}

#footer{
margin:0;
}

見出し

桜
キャプション

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

ブラウザで表示を確認する

5. 下マージンの挿入位置がおかしくなる問題

 サンプル04のテキストの分量を減らし、テキスト部分の高さをフロート要素よりも短くした場合、古いIEではテキスト部分の下マージンがフロート要素の下に挿入されるという問題が発生する。IE8ではこの問題が修正され、フロート要素の下に余計なマージンが入ることはなくなった。

サンプル05(サンプル04のテキストの分量を減らしたもの)

IE8の表示 IE8の表示
IE7の表示 IE7の表示
ブラウザで表示を確認する

 次回は、float関連の残りのバグについてまとめる。

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