インターネットエクスプローラー6、7、8のCSSの違い（1）

ブラウザに関する最も奇妙な統計の1つは、Internet Explorerバージョン6、7、8が共存することです。この記事の時点で、Internet Explorerバージョンは、合計で市場シェアの約65％を占めています。ウェブサイト開発コミュニティでは、この数ははるかに小さく、統計は約40％しかないことを示しています。

これらの統計のより興味深い部分は、IE6、IE7、およびIE8の間の値が非常に近いことであり、単一のMicrosoftブラウザーが過去の反対を支配するのを防ぐことです。これらの残念な統計によると、開発者は顧客向けのWebサイトを開発する際に現在使用されているすべてのIEブラウザーの包括的なテストを実施する必要があります。これは、個人プロジェクトでより多くのユーザーを引き付ける必要があります。

これらのJavaScriptライブラリ（フレームワーク）のおかげで、クロスブラウザーJavaScriptテストは、現在の状況が許すほど完璧に近いものです。しかし、これはCSS開発、特に現在IEにある3つのバージョンでは当てはまりません。

この記事では、IE6、IE7、およびIE8のCSSのサポートを理解したいさまざまな開発者に、詳細かつ使いやすいリファレンスを提供しようとします。このリファレンスには、次の状況の概要と互換性が含まれています。

A. 3つのブラウザの1つはエントリをサポートしていますが、他の2つはエントリではありません。

B. 3つのブラウザのうち2つはエントリをサポートしますが、もう1つはサポートしていません。

この記事では説明しません。

A. 3つのブラウザによってサポートされていないエントリ

B.プライベート属性

したがって、この記事の焦点は、必要なサポート欠陥ではなく、3つのブラウザ間の違いにあります。リストは次の5つの部分に分かれています。

1。セレクターと継承

2。擬似クラスと擬似要素

3。属性サポート

4。その他のテクノロジー

5.重要なバグと非互換性の問題

1。セレクターと継承

A.サブセレクター

例

説明する

子セレクターは、特定の親要素のすべての直接的な要素を選択します。

サポート

バグ

IE7では、親タグと子タグの間にHTMLコメントがある場合、子セレクターは機能しません。

B.チェーン

例

説明する

チェーンクラスは、次のような複数のクラス宣言を持つHTML要素を送信するために使用されます。

サポート

バグ

IE6は、チェーンの最後のクラスをクラスを使用する要素に一致させることができるため、この状況をサポートしているようですが、チェーン内のすべてのクラスを使用する要素を制限しないようにします。

C.属性セレクター

例

説明する

このセレクターにより、要素がプロパティを指定している限り、要素を配置できます。上記の例では、HREF属性を持つすべてのタグは制限されますが、HREF属性のないタグは制限されません。

サポート

D.兄弟セ​​レクターに近づく

例

説明する

このセレクターは、指定された要素に近い兄弟タグを見つけます。上記の例はPタグを制限しますが、それはH1タグの兄弟でなければならず、H1タグのすぐ後ろに従う必要があります。例えば：

上記のコードでは、CSSスタイルは最初のpでのみ機能します。それはH1の兄弟であり、すぐにH1に従うからです。 2番目のPはH1の兄弟でもありますが、すぐにH1には従いません。

サポート

バグ

IE7では、兄弟の間にHTMLコメントがある場合、隣接する兄弟セレクターが無効になります。

E.普通の兄弟セレクター

例

説明する

このセレクターは、指定された要素に従ってすべての兄弟要素を見つけます。上記の例にこのセレクターを適用すると、両方のPタグで機能します。もちろん、P要素がH1の前に現れた場合、そのP要素は一致しません。

サポート