IE9 是否支持 CSS3 ::before 和 ::after 伪元素？答案

【问题标题】：Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?IE9 是否支持 CSS3 ::before 和 ::after 伪元素？
【发布时间】：2011-11-01 17:06:13
【问题描述】：

在this MS compatibility table 上它说，IE9 不支持伪元素::before 和::after，但是当我尝试它时，它似乎确实......见JSBin

我做错了吗？我认为::before 和::after 会是很好的工具来隐藏 IE9 中的内容，而事实上它们并没有。

【问题讨论】：

caniuse.com/#feat=css-sel2 检查图表下方的“已知问题”标签。
@inhan: 没说 IE9。
@BoltClock 我的错，对不起。 caniuse.com/#search=%3Aafter
@inhan: 里面也没有关于 IE9 的内容...
@BoltClock 查看 IE 列并查看版本号。我要发截图吗？

标签： css internet-explorer-9 css-selectors pseudo-element

【解决方案1】：

IE8 及更高版本支持 CSS2 伪元素 :before 和 :after，采用传统的单冒号表示法。它们对 CSS3 并不陌生。

另一方面，双冒号表示法是new to CSS3。 IE9 确实支持::before 和::after 的新符号，同样也支持CSS1 伪元素::first-line 和::first-letter。然而，今后不会有新的伪元素使用单冒号语法，并且浏览器（包括 IE）应该支持所有伪元素的双冒号语法。

我不知道为什么该表说 IE9 不支持新的伪元素语法，因为根据上面链接的各个选择器的文档和您的测试用例，它确实支持。当然，还有这个答案。

【讨论】：

CSS2.1和CSS3以及冒号和双冒号是有区别的。双冒号在 CSS3 中用于伪元素，而单冒号仅用于伪选择器。在 CSS2.1 中，单冒号代表两者。
@Rob: “而单冒号仅用于伪类。”引入双冒号和单冒号正是因为人们将伪元素和伪类组合成一个令人困惑的总称，称为“伪选择器”，而单冒号被用来表示它们两者.

【解决方案2】：

IE 9 在“标准模式”中支持符号::after 和::before（带有两个冒号）。在“怪癖模式”中，它不会。这可以进行测试，例如如下：

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

这里忽略了 CSS 规则，因为 IE 9 进入了 quirks 模式。但是如果你在一开始添加下面这行，IE 9 就会进入标准模式，CSS 规则就会生效：

<!doctype html>

在 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">。

【讨论】：

这并不完全正确：因为 IE 在 quirks 模式下的行为类似于其自身的版本 4 或 5，如您的文章中所述，该版本不支持的任何内容都将在 quirks 模式下丢失在任何更高版本的 IE 中。这意味着在任何版本的 IE 上，quirks 模式都不支持旧符号和新符号中的 :after 和 :before。
另请注意，IE8+ 中的兼容模式与 quirks 模式有很大不同，因为兼容模式模拟 IE7，而 quirks 模式模拟 IE4/5。
@BoltClock，谢谢，我已更正，并将相应地编辑我的答案。

【解决方案3】：

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

CSS3 伪元素双冒号语法 请注意新的 CSS3 编写伪元素的方法是使用双冒号，例如 a::after { ... }，将它们与伪类区分开来。你可能会看到这个有时在 CSS 中。然而，CSS3 仍然允许使用单个冒号伪元素，为了向后兼容，我们会建议您暂时坚持使用此语法。

【讨论】：