2

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

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

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

  • 伪选择器添加元素，例如用于面包屑导航的箭头。
  • 我更喜欢功能检测而不是浏览器检测，因为某些浏览器会在 quirks 模式下工作（通常是 IE 8 / IE 9）
4

3 回答 3

2

好吧，除了 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
}
于 2013-10-17T15:53:26.407 回答
1

正如您在这里看到的http://caniuse.com/#search=after，除了早期版本的 IE8 之外，所有浏览器都支持 :after 和 :before 选择器。您可以通过脚本或条件注释检查浏览器是否为 IE 以及版本是否早于版本 8。

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

于 2013-10-17T15:56:09.463 回答
1 
document.querySelector(':after, :before');
于 2013-10-17T16:08:56.637 回答