これらの統計の興味深い点は、IE6、IE7、および IE8 の数値が非常に近いため、単一の Microsoft ブラウザーがシーンを独占することを防止していることです (これまでとは逆です)。これらの残念な統計に基づくと、開発者はクライアント向けの Web サイトを開発する際に、現在使用されているすべての IE ブラウザを徹底的にテストする必要があり、これにより、個人プロジェクトでより多くのユーザーを呼び込むこともできます。
JavaScript ライブラリ (フレームワーク) のおかげで、クロスブラウザーの JavaScript テストは、現在の状況が許す限り完璧に近いものになります。しかし、これは CSS 開発の場合、特に現在存在する 3 つのバージョンの IE の場合には当てはまりません。
この記事は、IE6、IE7、および IE8 の CSS サポートを理解したいさまざまな開発者に、詳細で使いやすいリファレンスを提供することを目的としています。このリファレンスには、次の状況の概要と互換性が含まれています。
A. 3 つのブラウザのうち 1 つはサポートしているが、他の 2 つはサポートしていない項目
B. 3 つのブラウザのうち 2 つはサポートしているが、1 つはサポートしていない項目
この記事では次のことについては説明しません。
A. 3つのブラウザでサポートされていない項目
B. プライベート属性
したがって、この記事では、サポートに必要な欠点ではなく、3 つのブラウザ間の違いに焦点を当てます。リストは次の 5 つのセクションに分かれています。
1. セレクターと継承
2. 疑似クラスと疑似要素
3. 属性のサポート
4. その他各種技術
5. 重要なバグと非互換性の問題
1. セレクターと継承
A. サブセレクター
例
| ボディ > p { 色: #fff; } |
説明する
子セレクターは、特定の親要素のすべての直接の子要素を選択します。上の例では、body が親要素で、p が子要素です。
サポート状況
| IE6 いいえ IE7はい IE8はい |
バグ
IE7 では、親タグと子タグの間に HTML コメントがある場合、子セレクターは機能しません。
B. チェーンの種類
例
| .class1.class2.class3 { 背景: #fff; } |
説明する
チェーン クラスは、次のように複数のクラス宣言を持つ HTML 要素を送信するために使用されます。
| <div class="クラス1 クラス2 クラス3"> <p>ここにコンテンツがあります。</p> </div> |
サポート状況
| IE6 いいえ IE7はい IE8はい |
バグ
IE6 は、チェーン内の最後のクラスを、そのクラスを使用する要素に一致させることはできますが、チェーン内のすべてのクラスを使用する要素を制限することはできないため、この状況をサポートしているようです。
C. 属性セレクター
例
| a[href] { 色: #0f0; } |
説明する
このセレクターを使用すると、指定された属性を持つ限り、要素を見つけることができます。上記の例では、href 属性を持つすべてのタグが修飾されますが、href 属性のないタグは修飾されません。
サポート状況
| IE6 いいえ IE7はい IE8はい |
D. 近くの兄弟セレクター
例
| h1+p { 色: #f00; } |
説明する
このセレクターは、指定された要素に隣接する兄弟タグを見つけます。上記の例では p タグを修飾しますが、これは h1 タグの兄弟である必要があり、h1 タグの直後に続く必要があります。例えば：
| <h1>見出し</h1> <p>ここにコンテンツがあります。</p> <p>ここにコンテンツがあります。</p> |
上記のコードでは、CSS スタイルは最初の p に対してのみ有効です。これは h1 の兄弟であり、h1 に従うためです。 2 番目の p も h1 の兄弟ですが、h1 のすぐ後に続くわけではありません。
サポート状況
| IE6 いいえ IE7はい IE8はい |
バグ
IE7 では、兄弟間に HTML コメントがある場合、隣接する兄弟セレクターは効果がありません。
E. 通常の兄弟セレクター
例
| h1~p { 色: #f00; } |
説明する
このセレクターは、指定された要素に続くすべての兄弟要素を検索します。このセレクターを上記の例に適用すると、両方の p タグに適用されます。もちろん、h1 より前に p 要素が存在する場合、その p 要素は一致しません。
サポート状況
| IE6 いいえ IE7 はい IE8はい |