Question

使用IE8（Windows XP支持），以下简单的CSS选择器无法实现将嵌套ul转换为none的目标。而是显示整个列表。此代码适用于IE9 +和所有其他现代浏览器。这是一个错误，还是预期的行为？

<html>
<head>
<style>
nav ul ul {
    display: none;
}
</style>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>
</body>
</html>

jsFiddle of above code here

Answer 1

这可能是因为IE8中的css规则无效，因为该浏览器中不存在nav元素。规则ul li ul正常运行。

Answer 2

@Pigueiras是正确的。您需要包含一个类似Modernizr（或html5 shim）的脚本，以便在IE＆lt; 8中设置HTML5语义元素的样式。

Answer 3

这可能是默认的IE8行为，他们不了解html5 <nav>标记。您必须在布局中强制使用em。

您可以将其添加到文档标题

<!--[if lt IE 9]>
<script>
    document.createElement('nav');
    /* left part is not needed for your situation but an example for you */
    document.createElement('header');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
</script>
<![endif]-->

Answer 4

这在IE7中对我有用。希望它有所帮助。

<html>
<head>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul style="display:none;">
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul style="display:none;">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>
</body>
</html>

嵌套ul显示：none在IE8中不起作用

4 个答案: