web-dev-qa-db-ja.com

CSS3 :: beforeおよび:: after疑似要素はIE9でサポートされていますか？

このMS互換性テーブル では、IE9は疑似要素をサポートしていません::beforeおよび::after、しかし私が試してみるとそうです...参照 JSBin

私は何か間違ったことをしていますか？ ::beforeおよび::afterは、IE9から情報を隠すための優れたツールですが、実際にはそうではありません。

cssinternet-explorer-9css-selectorspseudo-element
12
frequent

CSS2疑似要素:beforeおよび:afterは、従来の単一コロン表記で、IE8以降でサポートされています。それらはCSS3にとって新しいものではありません。

一方、ダブルコロン表記は CSS3の新機能 です。 IE9はのこの新しい表記法をサポートします ::before および ::after 、そして同様にCSS1疑似要素の場合 ::first-line および ::first-letter 。ただし、今後、新しい疑似要素でシングルコロン構文を使用することはできなくなり、ブラウザー（IEを含む）はすべての疑似要素でダブルコロン構文をサポートすることが期待されます。

上記のリンクされた個々のセレクターのドキュメントとテストケースによれば、IE9が新しい疑似要素構文をサポートしていないと、その表に示されている理由がわかりません。もちろん、この答えも。

27
BoltClock

IE 9は、「標準モード」で表記::afterおよび::before（2つのコロン付き）をサポートしています。 「癖モード」では、そうではありません。これはテストできます。次のように：

<style>
p::after  {  
  content: "***AFTER***";  
} 
</style>
<p>Hello world

ここでは、IE 9がquirksモードになるため、CSSルールは無視されます。ただし、最初に次の行を追加すると、IE 9が標準モードになり、CSSルールが有効になります。

<!doctype html>

IE 9では、 quirks mode では、新しいCSS機能（CSS2.1にもIEレガシーにもないほとんどの機能）がないのが一般的です。サポートされています。癖モードでは、IE9は古い1コロン表記:afterと:beforeもサポートしていません。開発者ツール（F12）で手動、「ドキュメントモード」メニュー、またはタグ<meta http-equiv="X-UA-Compatible" content="IE=8">を使用してドキュメントレベルで選択できる「IE8モード」でそれらをサポートします（2コロンバージョンはサポートしません）。

5
Jukka K. Korpela

http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors から引用

CSS3疑似要素の二重コロン構文疑似要素を記述する新しいCSS3の方法は、二重コロンを使用することであることに注意してください。例：a :: after { ...}、疑似クラスと区別するため。これはCSSで時々見られるかもしれません。ただし、CSS3では、下位互換性のために単一コロンの疑似要素も使用できます。当面は、この構文を使用することをお勧めします。

1
Pav