Question

https://stackoverflow.com/a/12059220/1421561

我喜欢戴维斯代码，但想知道在＆lt;中提供支持的最佳方法。 IE7。我的第一个想法是使用一个声明“如果有一个孩子添加一个类”。然后，该类将链接到以类似方式定位的背景图像。

您的解决方案是什么？

编辑：支持＆lt; IE7：

.menu li > a:after { margin-left: 5px; content: '\25BA'; }

Answer 1

不幸的是，我不知道有任何方法可以支持IE7或更早版本中的:before和:after选择器。它根本不受支持。

对于很多CSS的东西，有些黑客可以强迫旧的IE工作 - 像Selectivizr或CSS3Pie这样的工具。

但我知道:after没有这样的黑客攻击。对不起。

您可以自己研究：

http://caniuse.com/#search=after确认浏览器支持。该站点还列出了相关资源，其中通常包括相关黑客的链接。（虽然没有列出这个）
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills - 一个非常全面的黑客列表，可在旧版浏览器中实现现代浏览器功能。同样，此处没有:after支持的迹象。

我真诚的建议是在您的网站上放弃对IE7的支持。除非你有特殊需要支持它，否则几乎没有人会注意到 - 现在IE7用户很少;它的使用率比IE6快得多，今天它们的全球浏览器使用率都低于1％。判断自己是否值得为这半数用户（他们可能习惯于看到无法正常工作的网站）而感到高兴。

Answer 2

似乎没有人读到我想要一个jQuery备份。我已经明白，IE7对CSS的支持并不存在。

无论如何这是我的解决方案，如果有人会寻找相同的东西。

JS（jQuery）：

<!--[if IE 7]>
    <script type="text/javascript"> 
         $(function () {
             $("#mainnavi li:has(ul)").addClass("ie7_dropdown_arrow");
         });    
    </script>   
<![endif]-->

CSS：

#mainnavi .ie7_dropdown_arrow {
    *background: url(../images/dropdown_arrow.png) no-repeat right 0px;
    *padding-right: 20px;
}

#mainnavi .ie7_dropdown_arrow:hover {
    *background: url(../images/dropdown_arrow.png) no-repeat right -15px;   
}

旧浏览器支持的jQuery备份

2 个答案: