css child (>) selector not working in IE8?

2019-06-17 18:41发布

问题:

From what I gathered and understood here and there (stop me when I'm wrong) : child selector (>) works on IE7+ as long as you trigger the standards mode with your doctype, html5's <!DOCTYPE html> is supposed to do this.

Still, my css:

nav > ul > li > a
{
    padding: 0.2em 2em 0.2em 2em;
    background-color: #FAFAFA;
}
nav > ul > li > a:hover
{
    background-color: #AFAFAF;
}

doesn't seem to reach my html:

<!DOCTYPE html>
...
<body>
<header>
    <nav>
        <a class="inblock valignC logo" href="/"><img src="static/img/logo.gif" /></a>
        <!--Menu nav : LOGO | Agence | Portfolio | Equipe | Clients | Contact-->
        <ul class="inblock valignC">
            <li class="inline"><a class="ie" href="/agence/">Agence</a></li>
        ...
        </ul>
...

in IE8, I have to use the dedicated .ie class I added on targetted <a>s.

Any explaination ?

回答1:

You need to use the HTML5 Shiv for IE versions under 9:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->


回答2:

It's possible that it's not the selector, but rather the tags themselves, since they are not defined as standard tags in IE8 and below. You can see if this is the case by just using ul > li and seeing if the selector works.

There isn't really much you can do about that, other than not using HTML5 tags until more people upgrade their browsers. Personally I would rather use <div class="nav"> for now.



回答3:

I think it's becouse older browsers don't have the nav element.



回答4:

It doesn't work because IE8 doesn't understand, or 'correctly' implement, HTML tags such as <nav>.

Don't use HTML 5 until 2015. This is for 2 reasons:

  1. The W3C recommendation for HTML5 isn't finalised until Dec 2014 so any current browser implementation is guessing what what the finalised document will contain. Code that works now, is not guaranteed to work after that point (but probably will). Adding JS hacks on top, to make browsers HTML5 compliant, adds more potential forward compatibility issues.

  2. By 2015, the market share for IE8 will probably be at minimal levels e.g. below 2-3% at which point, the benefits of supporting IE8 will be outwayed by the costs of not using HTML5 compliant code.

In the meantime, it is a good idea to use an HTML5 doctype, because it is forwards and backwards compatible and use the subset of HTML5 tags that are also valid in HTML4 (in other words tags, that are valid in HTML4 AND HTML5, which is most of them). Personally I like to use <div class="nav"></div> instead of <nav></nav> etc etc.

At the end of the day, do what you want, but you need to be aware of these issues at least, especially in a world where HTML5 is a buzzword that is used frequently and inappropriately.