logo标签列表

CSS子元素(>)选择器在IE8中无法工作？

cssinternet-explorerinternet-explorer-8css-selectors
7

据我所了解（如果我说错了，请纠正我）：

子选择器（>）可以在IE7+上运行，只要您使用doctype触发标准模式，HTML5的<!DOCTYPE html>应该可以做到这一点。

不过，我的CSS代码：

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

我的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>
...

在IE8中，我必须使用我添加到目标的专用.ie类。有什么解释吗？
4个回答
11

你需要为IE版本低于9使用HTML5 Shiv：

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
是的，这非常简单。只需将它放在<head />部分的末尾，你就可以使用了！ - Code Maverick
2

可能不是选择器有问题，而是标签本身的问题，因为在IE8及以下版本中它们没有被定义为标准标签。你可以通过只使用 ul > li 查看是否存在这种情况。

除了不使用HTML5标签直到更多人升级他们的浏览器之外，你实际上无法做太多事情。个人认为现在最好使用 <div class="nav">。

2
实际上，有一个JS技巧可以让元素正常工作。在使用之前，先使用document.createElement('nav')。 - Andrea
没错，<nav>和<header>标签不被支持，shiv修复得很好。出于许多明显的原因，我讨厌网页设计（尽管我对HTML5的发展感到非常满意），但它仍然有一些很酷的技巧存在^^ 感谢您的快速回答。 - r---------k
1
它无法工作是因为IE8不理解或'正确地'实现HTML标签，例如<nav>。
在2015年之前不要使用HTML 5，原因有两个：
1. W3C对HTML5的建议直到2014年12月才最终确定，因此任何当前浏览器实现都是猜测最终文档将包含什么。现在有效的代码不能保证在那时之后仍然有效（但可能会）。添加JS Hack以使浏览器符合HTML5标准会增加更多潜在的向前兼容性问题。
2. 到2015年，IE8的市场份额可能已经降至最低水平，例如低于2-3％，此时支持IE8的好处将被不使用符合HTML5标准的代码的成本所抵消。
同时，使用HTML5 doctype是一个好主意，因为它向前和向后兼容，并且使用HTML5子集的标签也在HTML4中有效（换句话说，这些标签既在HTML4中又在HTML5中有效，大部分标签都是如此）。个人喜欢使用<div class="nav"></div>代替<nav></nav>等等。
归根结底，你可以做你想做的事情，但至少需要了解这些问题，特别是在一个HTML5被频繁和不适当地使用的世界里。
1

我认为这是因为旧版浏览器不支持导航元素。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接