1

使用 IE8（Windows XP 支持），以下简单的 CSS 选择器无法实现将嵌套的 ul 转换为无显示的目标。而是显示整个列表。此代码适用于 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在这里

4

4 回答 4

3

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

于 2013-03-22T00:20:09.927 回答
2

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

于 2013-03-22T00:21:45.137 回答
1

这可能是不理解 html5<nav>标记的默认 IE8 行为。您必须在布局中强制使用 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]-->
于 2013-03-22T00:23:55.290 回答
0

这在 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>
于 2013-03-22T00:19:47.153 回答