IE8 支持 :hover:after 吗？答案

【问题标题】：Is :hover:after supported in IE8?IE8 支持 :hover:after 吗？
【发布时间】：2012-12-29 00:29:11
【问题描述】：

我有一个弹出菜单，在“快速链接”的末尾，我使用第一个 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 html>

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

【问题讨论】：

根据caniuse，“IE8 无法将 :after 与其他分层元素结合”。也许他们的意思是IE8不能结合pseudoselectors。不过我可能是错的，还没有测试过。
@Christian Varga：那个注释似乎很可疑——它指出“例如 .myClass:last-child:after 可以在 Firefox、Chrome 或 Safari 中工作，但不能在 IE8 中工作。”但那是因为 :last-child 在 IE8 中不起作用。它与 :after 无关，也与伪类和伪元素的组合无关。作为记录， .myClass:first-child:after 确实工作，所以应该 :hover:after 通常。
在 IE8 中看起来没有问题。因为我测试了一个类似的 html 测试代码，我能够看到背景图像。你能检查一下某些样式是否被覆盖了..
嗯，IE8 的开发者工具不是很好，所以我看不到伪元素，但我没有看到任何冲突，但我不能肯定地说。
你能在jsfiddle.net上设置一个测试用例吗？确保在测试用例中提供正确的图像 URL，以便我们可以看到它们。

标签： css internet-explorer-8 css-selectors pseudo-element pseudo-class

【解决方案1】：

在您的 :after:hover 规则中添加 content:"";。这将强制重绘

【讨论】：

您还可以添加content:" " 和content:" " /*two spaces*/ 以获得更多变化，以使ie8 在更多选择器上重绘。

【解决方案2】：

你的文档类型是什么样的？

IE8 确实可以处理伪选择器，但如果您没有严格的文档类型，则 :hover 选择器将仅适用于锚点。

【讨论】：

你的意思是说“如果你没有有一个严格的文档类型”。此外，没有它，:after 选择器也根本不起作用。
Doctype 是 HTML5 类型（“DOCTYPE HTML”），所以我认为它会触发标准模式。

【解决方案3】：

几个不错的选择：

使用垫片。这使您可以进行改造（由于 css 的级联性质）并修复“旧浏览器缺乏支持”问题。例如：http://selectivizr.com/
使用 jQuery 1.8.1+，它为旧版浏览器提供了对此类功能的支持。

【讨论】：

我们在工作中使用 jQuery 1.7.2。 1.8.1+ 中有什么可以帮助我解决这个问题吗？我最终在 li 标签上附加了一个 .hover() 监听器。不过，我会研究 Selectivizr。
唉，selectivizr 不覆盖 :after。

【解决方案4】：

最后，我不得不编写一些 Javascript 来控制该元素的悬停事件并以这种方式设置元素的样式。它在 IE8 中不是很完美，但它确实有效。

【讨论】：