Is :hover:after supported in IE8?

问题

I have a flyout menu where at the end of "Quick Links" I use the :after pseudo-element on the first LI tag to display an icon from a sprite file.

The 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>

The 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; }

What is supposed to happen is that when you hover over the LI tag, I change the icon to an active color.

.rs-quick-links-nav > li:hover:after seems to work in Firefox, Chrome, and Safari, but not IE8 (I don't care about anything before IE8). According to QuirksMode, IE8 supposedly supports :hover and :after, so I'm not sure why .rs-quick-links-nav > li:hover:after does not work. Does anybody have any ideas how to make this work (even if I have to do something in Javascript).

EDIT: DOCTYPE is the HTML5 doctype.

<!DOCTYPE html>

EDIT: JSFiddle fragment here http://jsfiddle.net/tangst/hA7FH/

回答1:

in your :after:hover rule add content:"";. this will force a redraw

回答2:

What does your doctype look like?

IE8 does handle pseudo-selector but if you don't have a strict doctype the :hover selector will only work on anchors.

回答3:

A couple of great options:

Use a shim. This lets you retro-fit (due the cascading nature of css) and fix 'older browser lack of support' issues. For example: http://selectivizr.com/
Use jQuery 1.8.1+ which provides support for these kind of things for older browsers.

回答4:

In the end, I had to write some Javascript to control the hover event of that element and style the element that way. It's not quite perfect in IE8, but it worked.

来源：https://stackoverflow.com/questions/14328734/is-hoverafter-supported-in-ie8

标签

css

internet-explorer-8

css-selectors

pseudo-element

pseudo-class