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

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

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

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

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

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

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

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

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

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

サンプル01

IE8の表示 IE8の表示
IE7の表示 IE7の表示
div{
border:solid 2px blue;
width: 300px;
}

p{
background-color: limegreen;
}

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

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

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

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

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

サンプル02

IE8の表示 IE8の表示
IE7の表示 IE7の表示
div{
border:dashed 10px blue;
background-color: yellow;
padding: 20px;
width: 300px;
}
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]