1

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はこちら

4

4 に答える 4

3

これはおそらく、nav要素がそのブラウザーに存在しないため、IE8 では css ルールが無効であるためです。ルールul li ulは正しく機能します。

于 2013-03-22T00:20:09.927 に答える
2

@ピゲイラスは正しいです。IE <8 で HTML5 セマンティック要素のスタイルを設定するには、Modernizr (または html5 shim) などのスクリプトを含める必要があります。

于 2013-03-22T00:21:45.137 に答える
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 に答える