
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


div{ border:solid 2px blue; width: 300px; } p{ background-color: limegreen; }
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
※ブラウザで表示を確認する
2. 横幅の指定で背景の表示範囲が変わる問題
CSS 2.1では背景の表示範囲にパディングと罫線部分が含まれることになっている。たとえば、サンプル02はテキストの背景を黄色に指定して、青色の罫線で囲んで表示したものだ。このとき、罫線は破線として表示して、背景の表示範囲がわかるようにしている。すると、IE8のように罫線の部分にまで黄色の背景が表示されることがわかる。
しかし、古いIEでは横幅を指定すると罫線の部分に背景が表示されないという問題が発生していた。
サンプル02


div{ border:dashed 10px blue; background-color: yellow; padding: 20px; width: 300px; }
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
※ブラウザで表示を確認する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
話題のセキュリティ事故体験ゲーム
-
保育業界のDX(後編)
-
いまさら聞けない「PPAP」
-
IDaaSって何?
-
明日からではもう遅い?!
-
請求書がきてからでは遅い
-
内部不正や不注意をどう防ぐ?
-
ビッグデータ最前線!
-
連載!プロが語るストレージ戦略
-
モバイルデバイスもターゲットに!
-
セキュリティの今を知る
-
連載!プロが語るストレージ戦略
-
保育業界のDX(前編)
-
特集:IT最適化への道
-
いまあるデータで身近な業務をDX
-
次の一手はこれだ!
-
データの散在と非常率運用がネック
-
企業DXのキモはクラウドにあり
-
講演の見どころを紹介
-
デジタルを当たり前と言えるか?
-
さあ、クラウドで解決しよう。
-
利便性とセキュリティの両立
-
いままさに社会にとっての転換点
-
連載!プロが語るストレージ戦略
-
ゼロトラストに不可欠なID管理