0

子としてthumbという名前のdivクラスを持つスイッチコントロールという名前のdivクラスがあります

<div class="switch-control">
         <div class="thumb"></div>
</div>

と呼ばれるそれらのためのcssがあります：

.switch-control > .thumb
.switch-control > .thumb::before

両方の css クラスが影響を受けており、chrome と firefox で使用されていますが、IE8,9 では.switch-control > .thumbがアクティブであり、.switch-control > .thumb::beforeがマークアウトされて使用されていないため、IE8,9 で影響を受けているのを確認できません。

それはなぜですか、どうすれば修正できますか? ありがとう

4

1 に答える 1

1

IE9は、奇妙な理由で疑似要素のスタイルを消す傾向がありますが、サポートされているすべての疑似要素（CSS1::first-lineと::first-letter、およびCSS2::beforeとを含む::after）のCSS3ダブルコロン表記をサポートしています。あなたのスタイルが機能していない場合は、他の何かが間違っています（この効果については、SOの質問がいくつかありますが、何が問題を引き起こしているのかわかりません）。

IE8は、疑似要素のCSS3ダブルコロン表記をサポートしていません。これまで常に使用されてきたシングルコロン表記のみをサポートしています。

IE8をサポートする必要がある場合は、従来のシングルコロン表記を使用する必要があります（互換性の理由から、すべてのブラウザーが引き続きサポートすることが期待されます）。

.switch-control > .thumb:before

そしてあなたのコメントに関して：

cssスタイルシートを.switch-control>.thumb::beforeから.switch-control>.thumb：before（ダブルコロンからシングルコロン）に更新しましたが、すべてのブラウザー（chromeおよびIE）でダブルコロンが表示されます。どうして？

先に述べたように、疑似要素には、互換性のために単一のコロンが維持された状態で、二重のコロンが接頭辞として付けられることになっています。これは、CSS3セレクターから始めて、今後使用する必要がある新しい表記法です。したがって、ブラウザーの開発者ツールが疑似クラスではなく疑似要素に遭遇すると、CSS3を理解している場合は二重コロンで表示されます。

つまり、ダブルコロンで表示されているのはブラウザのUIだけです。スタイルシートのコードを変更することはありません。

于 2012-06-20T17:22:48.303 に答える