IE6、IE7、IE8におけるCSSの違いまとめ

IE? - IE6, IE7 and IE8

Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。

この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしていても、規約が想定している動作と違う動きをするものがある。

Louis Lazaris氏がSmashing MagazineにおいてCSS Differences in Internet Explorer 6, 7 and 8のタイトルのもとIE6、IE7、IE8で使えるCSSについてまとめている。すべてのバージョンでサポートされていないものは掲載からはずされている。IEのどのバージョンで使えるのか見やすく参考になる。紹介されている機能は次のとおり。

セレクタと継承

項目	IE6	IE7	IE8	備考
チャイルドセレクタ	×	○	○	IE7では親と子の間にHTMLコメントがある場合にはチャイルドセレクタは機能しない
チェインクラス	×	○	○	IE6は一見サポートしているように見えるがそうではない
属性セレクタ	×	○	○
隣接セレクタ	×	○	○	IE7では隣接する要素の間にHTMLコメントがある場合にはチャイルドセレクタは機能しない
間接セレクタ	×	○	○

擬似クラスと擬似要素

項目	IE6	IE7	IE8	備考
:hover擬似クラスに続く子孫セレクタ	×	○	○
チェイン擬似クラス	×	○	○
非アンカー要素の:hover擬似クラス	×	○	○
:first-child擬似クラス	×	○	○	IE7ではHTML湖面度が最初の子要素の前にある場合には機能しない
:focus擬似クラス	×	×	○
:before擬似クラスス	×	×	○
:after擬似クラス	×	×	○

プロパティ

項目	IE6	IE7	IE8	備考
ポジション指定からの仮想サイズ	×	○	○	絶対ポジションにおけるtop、right、bottom、left指定でwidthoyおよびheightを提供
min-height	×	○	○
min-width	×	○	○
max-height	×	○	○
max-width	×	○	○
borderの透過指定	×	○	○
positionの固定指定	×	○	○
background-attachmentの固定指定	×	○	○	IE6は誤ったバックグラウンドセットを持った要素の割合指定に関連して想定していない背景画像の固定をおこなう。そのためroot要素いおいてのみ動作する
inherit	×	×	○	IE6とIE7ではdirectionとvisibilityに対してのみinheritが適用される
テーブルセルにおけるborder-spacing	×	×	○
テーブルにおける空セルの表示するempty-cells	×	×	○
テーブルキャプションの縦方向ポジションcaption-side	×	×	○
クリッピングのエリア指定	×	×	○	IE6とIE7ではカンマを使わない非推奨の記述をする場合には機能する
orphans	×	×	○
widows	×	×	○
page-break-inside	×	×	○
outline	×	×	○
displayにおけるblock, inline, none以外の指定	×	×	○
white-space	×	×	○

その他のテクニック

項目	IE6	IE7	IE8	備考
@importに対するメディアタイプ	×	×	○	IE6とIE7でも@importは動作するがメディアタイプが指定されていると機能しない
カウンタ値	×	×	○	counter-incrementおよびcontentプロパティ
クオート文字列の指定	×	×	○