如何检测浏览器支持：after和：before

Question

我正在构建依赖于css :after和:before伪选择器的菜单。如何检测浏览器是否支持它们？

我发现this article解释了如何检测可以在JavaScript中访问的css属性，但它似乎不适用于我的情况。

[编辑]在回答评论和第一次回复时：

• 伪选择器添加元素，例如用于痕迹导航的箭头。
• 我更喜欢功能检测到浏览器检测，因为有些浏览器会以怪异模式运行（通常是IE 8 / IE 9）

Answer 1

嗯，除了IE 7以外的所有浏览器都支持它们，所以应该这样做。

<!--[if lt IE 8]>
  <script> window.contentSupported = false; </script>
<![endif]-->

在你的javascript中你可以做到。

if(window.contentSupported !== false) {
   // :before is supported
} else {
   // :before isn't supported
}

Answer 2

正如你在这里看到的那样http://caniuse.com/#search=after，：after和：除了早期版本的IE8之外，每个浏览器都支持选择器。如果浏览器是IE并且版本早于版本8，则可以通过脚本或条件注释进行检查。

http://modernizr.com/download/这是一个非常好的工具，用于检测浏览器能够理解哪些功能。它是一个库，它为你的html body标签添加了一个css类。在您的情况下，您只需检查“Css生成内容：之前和之后”选项。

Answer 3

document.querySelector(':after, :before');