IE6、IE7、およびIE8の違い。 パート1

（translから。この記事は完全で一貫しているとは主張していないので、その根拠に基づいて理論を構築することはありません。これは開発者向けの実用的なガイドです。

ブラウザーの使用に関連する最も奇妙な統計的事実の1つは、Internet Explorerバージョン6、7、および8の広範な使用です。現在、Internet Explorerのすべてのバージョンは、現在使用されているブラウザーの市場の約65％を占めています。 Web開発者の間では、この数字は低く、IEユーザーのシェアは市場のわずか40％です。
（翻訳から。これらの40％がサイト間のクロスブラウザ互換性をチェックする不幸なレイアウトデザイナーだけであることを願っています 。たとえば、 ここでRunet統計が利用可能です 。コンピューターはオフィスユーザーであり、私たちのヒーローの最も熱心なファンです。）

IEファミリのブラウザの人気がほぼ同じであることは興味深いことです。以前のように、単一のドメインブラウザを選択することは不可能です。 （翻訳から。もちろん、不可能です。 私は見ているだけで、支配的なブラウザを隔離することはできません。=））したがって、Web開発者はさまざまなブラウザでプロジェクトのパフォーマンスを確認し、顧客と個人ページの両方のWebサイトを開発する必要があります。

もちろん、さまざまなJavascriptライブラリのおかげで、クロスブラウザテストは、この状況が一般的に許す限り良好になりました。 （翻訳から。さらに、異なるブラウザ、 IEコレクションなどでスクリーンショットを撮る機会もあります）しかし、これには何か問題があります。特に、IEの3つの使用バージョンの結果を見た場合です。

この記事は、IE6、IE7、およびIE8間のCSS処理の違いを理解しようとしているWeb開発者に、包括的で理解しやすい情報を提供する試みです。 以下に、1つまたは2つのブラウザでサポートされているプロパティの簡単な説明を示しますが、3つすべてを同時にはサポートしていません。 IEのいずれによっても実行されないプロパティや、それらに固有のプロパティは対象外です。 したがって、特定のCSSプロパティのサポートの欠如ではなく、ブラウザー間の違いに厳密に重点が置かれます。

セレクターと継承

子セレクター

例：
body>p {
color: #fff;
}

説明：
子セレクターは、指定された親の直接の子であるすべての要素を選択します。 上記の例では、bodyは親で、pは子です。 （翻訳から。IE7+では、適切な操作のために正しいDoctypeも指定する必要があります。）
サポート： IE7、IE8
エラー： IE7では、子セレクターと親要素の間にHTMLコメントがある場合、子セレクターは機能しません。

接続されたクラス

例：
.class1.class2.class3 {
background: #fff;
}

説明：
接続されたクラスは、次のように、1つの要素に複数のクラスがある場合に使用されます。
<dіv class="class1 class2 class3">
<>- .</>
</dіv>

サポート： IE7、IE8
エラー： IE6は、このCSSプロパティを最後のクラスの要素（例のクラスclass3の翻訳から）に適用し、すべてのクラスによって一度にマークされたものだけではなく、このプロパティをサポートしません。

属性セレクター

例：
a[href] {
color: #0f0;
}

説明：
このプロパティを使用すると、指定された属性がある場合にのみ要素にマークを付けることができます。 たとえば、上記の例では、href属性を持つすべてのリンクがマークされますが、他のすべてのリンクではこのプロパティは適用されません。
サポート： IE7、IE8

隣接するセレクター

例：
h1+p {
color: #f00;
}

説明：
このセレクターは、特定のセレクターに隣接し、すぐ後に続く要素のプロパティを決定します。 たとえば、次のコードでは
<1></1>
<>- .</>
<>- .</>

CSSプロパティは最初の段落にのみ適用されます。
サポート： IE7、IE8
エラー： IE7では、子セレクターと親要素の間にHTMLコメントがある場合、子セレクターは機能しません。

共通の隣接セレクター

例：
h1~p {
color: #f00;
}

説明：
特定のセレクターに続くすべての隣接要素のプロパティを定義します。 たとえば、上記の例を使用すると、このプロパティは最初の段落と2番目の段落に適用されます。 段落が見出しの前にある場合、このプロパティは適用されないことに注意してください。
サポート： IE7、IE8

擬似クラスと擬似要素

擬似クラスの後の子セレクター：ホバー

例：
a:hover span {
color: #0f0;
}

説明：
要素は、他のセレクターと同様に子としてマークできます。 与えられた例では、リンク内のspan要素はテキストの色を緑に変更します。
サポート： IE7、IE8

接続された擬似クラス：ホバー

例：
a:first-child:hover {
color: #0f0;
}

説明：
擬似クラスは、隣接する要素に関連付けることができます。 上記の例では、各リンクがマークされています。これは、その親の最初の子であり、擬似クラス：hoverを適用します。
サポート： IE7、IE8

接続された擬似クラス：ホバー

例：
a:first-child:hover {
color: #0f0;
}

説明：
擬似クラスは、隣接する要素に関連付けることができます。 上記の例では、各リンクがマークされています。これは、その親の最初の子であり、擬似クラス：hoverを適用します。 （translから。わかりませんが、そうでない場合は修正してください。）
サポート： IE7、IE8

疑似クラス：他のセレクターのホバー

例：
div:hover {
color: #f00;
}

説明：
ホバー擬似クラスは、aだけでなく、任意のセレクターに適用できます。
サポート： IE7、IE8

擬似クラス：最初の子

例：
div li:first-child {
background: blue;
}

説明：
選択したクラスのプライマリ子セレクターのプロパティを定義します。
サポート： IE7、IE8
エラー： IE7では、親要素と子要素の間にHTMLコメントがある場合、セレクターは機能しません。

疑似クラス：フォーカス

例：
a:focus {
border: solid 1px red;
}

説明：
フォーカスされている要素のプロパティを定義します。
サポート： IE8

疑似クラス：beforeおよび：after

例：
#box:before {
content: " .";
}

#box:after {
content: " .";
}

説明：
このブロックの前後にあるテキストを生成します。
サポート： IE8

（翻訳から。このため、翻訳の最初の部分を終了します。このトピックに興味がありますか、％username％？IE6がいつかは消えると信じているので、それを開発して自分の考えで補足する価値がありますか？デスクトップ？私はアドバイスやヒントを喜んでいます。）