IE8で修正されたCSSとHTMLおよびXHTML関連のバグ

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　今回はIE8で修正されたCSSのfloat関連以外のバグについてまとめていく。また、HTMLおよびXHTML関連で修正されたバグについても紹介する。

　なお、サンプルではIE8の互換表示ボタンを利用して、IE8とIE7のStandardsモード（標準準拠モード）で表示を比較していく。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。

1. 横幅の指定でマージンが消える問題

　IE8では、横幅の指定で要素の上下マージンが消えるという問題が修正された。たとえば、サンプル01では

でマークアップしたテキスト部分の上下にデフォルトスタイルシートで約1.33emのマージンが挿入されるため、IE8のように緑色のテキストと青色の枠線の間に余白が入る。

　しかし、古いIEでは横幅を指定するとマージンが消えてしまうという問題が発生していた。サンプル01では

の親要素に対して横幅を指定しているが、

自身に横幅を指定しても同じ問題が発生する。

サンプル01

IE8の表示

IE7の表示

div{
border:solid 2px blue;
width: 300px;
}

p{
background-color: limegreen;
}

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

2. 横幅の指定で背景の表示範囲が変わる問題

　CSS 2.1では背景の表示範囲にパディングと罫線部分が含まれることになっている。たとえば、サンプル02はテキストの背景を黄色に指定して、青色の罫線で囲んで表示したものだ。このとき、罫線は破線として表示して、背景の表示範囲がわかるようにしている。すると、IE8のように罫線の部分にまで黄色の背景が表示されることがわかる。

　しかし、古いIEでは横幅を指定すると罫線の部分に背景が表示されないという問題が発生していた。

サンプル02

IE8の表示

IE7の表示

div{
border:dashed 10px blue;
background-color: yellow;
padding: 20px;
width: 300px;
}

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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