logo标签列表

IE8支持:hover:after吗？

cssinternet-explorer-8css-selectorspseudo-elementpseudo-class
3
我有一个弹出式菜单，在“快速链接”末尾，我使用:first LI标签上的:after伪元素来显示来自精灵文件的图标。
HTML代码：
<ul class="rs-quick-links-nav">
   <li>
    <a href="#">QUICK LINKS</a>
    <ul>
     <li><a href="#">Enhanced Recipe Search</a></li>
     <li><a href="#">Recipe Collections &amp; Favorites</a></li>
     <li><a href="#">Cooking Tips &amp; Techniques</a></li>
     <li><a href="#">Shopping &amp; Storing</a></li>
     <li><a href="#">Tools &amp; Products</a></li>
     <li><a href="#">New Uses for Old Things</a></li>
     <li><a href="#">Guide to Ingredients</a></li>
    </ul>
  </li>
</ul>

CSS：
.rs-quick-links-nav { position: absolute; top: 0; right: 20px; }
.rs-quick-links-nav > li { float: left; position: relative; white-space: nowrap; height: 19px; padding: 4px 0 4px 0; }
.rs-quick-links-nav > li > a { color: #999999; display: block; font: normal 1.2em Arial, sans-serif; }
.rs-quick-links-nav > li:after { content: ' '; background: transparent url('@static.base@/i/rs-global-sprite.png') -220px 0 no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav > li > a:hover { text-decoration: none; }
.rs-quick-links-nav > li:hover:after { content: ' '; background: transparent url('global-sprite.png') -220px -20px no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav li ul { background-color: #FFFFFF; border: 4px solid #69b8b8; left: -9999px; padding: 2px 8px; position: absolute; top: 24px; visibility: hidden; z-index: 9900; }
.rs-quick-links-nav li:hover ul { left: auto; right: -18px; visibility: visible; }
.rs-quick-links-nav li li { padding: 2px 0; }
.rs-quick-links-nav li li + li { border-top: 1px dotted #333333; }
.rs-quick-links-nav li li a { color: #666666; display: block; font: normal 1.2em/30px Arial, Verdana, sans-serif; height: 30px; padding: 0px 8px; }
.rs-quick-links-nav li li a:hover { background: #f6f6f6; }

应该发生的是，当你悬停在LI标签上时，我会将图标更改为活动颜色。
.rs-quick-links-nav>li:hover:after 在Firefox、Chrome和Safari中似乎有效，但在IE8中不起作用（我不关心IE8之前的任何版本）。根据QuirksMode的说法，IE8应该支持:hover和:after，所以我不确定为什么.rs-quick-links-nav>li:hover:after不起作用。有人有什么想法可以使其工作吗（即使我必须在Javascript中执行某些操作）。
编辑：DOCTYPE是HTML5 doctype。
<!DOCTYPE html>

编辑：这里有JSFiddle片段http://jsfiddle.net/tangst/hA7FH/

根据caniuse的说法，"IE8无法将:after与其他分层元素组合使用"。也许他们想表达的是IE8无法将伪选择器组合使用。不过我可能错了，还没有测试过。 - Christian
1
@Christian Varga：那个注释似乎有问题——它说：“例如，.myClass:last-child:after 在 Firefox、Chrome 或 Safari 中可以工作，但在 IE8 中不行。”但这是因为 :last-child 在 IE8 中根本不起作用。这与 :after 或伪类和伪元素的组合无关。值得一提的是，.myClass:first-child:after 确实可以工作，通常:hover:after也应该可以。 - BoltClock
看起来在IE8中没有问题。因为我测试了类似的HTML测试代码，我能够看到背景图片。你能否检查一下是否有一些样式被覆盖了？ - Rajkamal Subramanian
好的，IE8 的开发者工具不太好用，所以我看不到伪元素，但是我没有看到任何冲突，但我不能确定。 - Stephen
1
你能在http://jsfiddle.net上设置一个测试用例吗？请确保在测试用例中提供正确的图像URL，以便我们可以看到它们。 - BoltClock
这是链接 http://jsfiddle.net/tangst/hA7FH/2/。我已解决CSS中的@static.base@引用，将其替换为实际的雪碧图像。IE8仍未达到我的预期，因此我认为我可以放心地排除任何关于冲突CSS样式的担忧。 - Stephen
4个回答
2
在你的:after:hover规则中添加content:"";。这将强制重新绘制。
您还可以添加 content:" " 和 content:" " /*两个空格*/ 以增加更多变化，使ie8在更多选择器上重新绘制。 - EliSherer
1
你的文档类型是什么样子的？
IE8可以处理伪选择器，但如果你没有使用严格的文档类型，:hover选择器只能在锚点上起作用。
你的意思是说“如果你没有严格的文档类型声明”。此外，如果没有它，:after选择器也将完全无法工作。 - BoltClock
Doctype 是 HTML5 类型（“DOCTYPE HTML”），因此我认为它会触发标准模式。 - Stephen
1

以下是几个不错的选择：

  • 使用 shim。这样可以通过级联的 CSS 来进行后期适配并修复“旧浏览器缺乏支持”的问题。例如：http://selectivizr.com/

  • 使用 jQuery 1.8.1+，它提供了对旧浏览器的这些功能的支持。

我们在工作中使用的是jQuery 1.7.2。1.8.1+版本中是否有任何可以帮助我解决这个问题的东西？最终我在li标签上附加了一个.hover()监听器。不过我会研究一下Selectivizr。 - Stephen
哎呀，selectivizr 不支持 :after。 - Stephen
0
最终，我不得不编写一些Javascript来控制该元素的悬停事件并以那种方式样式化该元素。在IE8中它不是完美的，但它起作用了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接