CSS IE9 是否支持 CSS3 ::before 和 ::after 伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7157405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
提问by frequent
On this MS compatibility tableit says, IE9 does not support pseudo-elements ::beforeand ::after, but when I try it seems it does... see JSBin
在这个 MS 兼容性表上，它说 IE9 不支持伪元素::before和::after，但是当我尝试时，它似乎确实......请参阅JSBin
Am I doing something wrong? I thought ::beforeand ::afterwould be nice tools to hide stuff from IE9, when in fact, they don't.
难道我做错了什么？我认为::before并且::after将是在 IE9 中隐藏内容的好工具，但实际上，他们没有。
回答by BoltClock
The CSS2 pseudo-elements :beforeand :after, with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.
IE8 及更高版本支持使用传统单冒号表示法的 CSS2 伪元素:before和:after。它们对 CSS3 并不陌生。
The double-colon notation, on the other hand, is new to CSS3. IE9 doessupport this new notation for ::beforeand ::after, and likewise for the CSS1 pseudo-elements ::first-lineand ::first-letter. Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.
另一方面，双冒号符号是CSS3 的新内容。IE9不支持这种新的记法::before和::after，且同样CSS1伪元素::first-line和::first-letter。然而，展望未来，没有新的伪元素可以使用单冒号语法，并且浏览器（包括 IE）应该支持所有伪元素的双冒号语法。
I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.
我不知道为什么该表说 IE9 不支持新的伪元素语法，因为根据上面链接的各个选择器的文档以及您的测试用例，它确实支持。当然，还有这个答案。
回答by Jukka K. Korpela
IE 9 supports the notations ::afterand ::before(with two colons) in “standards mode”. In “quirks mode”, it does not. This can be tested e.g. as follows:
IE 9 支持“标准模式”中的符号::after和::before（带有两个冒号）。在“怪癖模式”中，它没有。这可以测试如下：
<style>
p::after {
content: "***AFTER***";
}
</style>
<p>Hello world
Here the CSS rule is ignored, because IE 9 goes to quirks mode. But if you add the following line at the very start, IE 9 goes to standards mode and the CSS rule takes effect:
这里忽略了 CSS 规则，因为 IE 9 进入了 quirks 模式。但是，如果您在一开始添加以下行，IE 9 将进入标准模式并且 CSS 规则生效：
<!doctype html>
It is common in IE 9 that in quirks mode, new CSS features (most features that are neither in CSS 2.1 or in the IE legacy) are not supported. In quirks mode, IE 9 does not support the old one-colon notations :afterand :beforeeither. It supports them (but not the two-colon versions) in “IE 8 mode”, which you can select in developer tools (F12) manually, in the “document mode” menu, or at document level using the tag <meta http-equiv="X-UA-Compatible" content="IE=8">.
在 IE 9 中，在quirks mode 中，新的 CSS 功能（大多数既不在 CSS 2.1 中也不在 IE 遗留中的功能）不受支持是很常见的。在 quirks 模式下，IE 9 不支持旧的单号符号:after，也不支持 :before。它在“IE 8 模式”中支持它们（但不是两个冒号版本），您可以在开发人员工具 (F12) 中手动选择，在“文档模式”菜单中，或使用标签在文档级别<meta http-equiv="X-UA-Compatible" content="IE=8">。
回答by Pav
As quoted from http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
引自http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
CSS3 pseudo-element double colon syntaxPlease note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
CSS3 伪元素双冒号语法请注意，新的 CSS3 编写伪元素的方式是使用双冒号，例如 a::after { ... }，将它们与伪类区分开来。您有时可能会在 CSS 中看到这一点。然而，为了向后兼容，CSS3 仍然允许使用单冒号伪元素，我们建议您暂时坚持使用这种语法。
