1

HTML Web ページの CSS ベースのドロップダウン ナビゲーション メニューに取り組んでいます。Google Chrome、Mozilla Firefox、および Mobile Safari では完全にレンダリングされますが、問題は Internet Explorer 9 です。バーとして表示される代わりに、CSS スクリプトが割り当てられていないかのように、すべてが黒丸で表示されます。私のHTMLは標準です

    <link href="menu.css" rel="stylesheet" />

と

    <nav><ul><li><ul>ITEM_NAME<a href="LINKS"></ul></li></ul></nav>

フォーマット。

私のCSSスクリプトは次のようになります。

    nav {
margin: auto; 
text-align: center;
    }

    nav ul ul {
display: none;
    }

nav ul li:hover > ul {
    display: block;
}


    nav ul {
background: #000;
list-style: none;
position: relative;
display: inline-table;
    }
nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #FF6600;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 10px 10px;
        color: #fff; text-decoration: none;
    }


nav ul ul {
    background: #000; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #333;
                    border-left: 2px solid #333;
                    border-right: 2px solid #333;
        border-bottom: 1px solid #333; 
                    position: relative;
    }
        nav ul ul li a {
            padding: 10px 10px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #FF6600;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

これを Internet Explorer 9 で正しくレンダリングするために何をする必要があるかについてのアイデアはありますか? :) ありがとう、ショーン。

4

2 に答える 2

2

navIEのすべてのバージョンがタグを理解できるわけではありません。ここで詳しく説明されているように、いくつかの回避策があります。

IEで機能しないhtml5の新しい要素（ヘッダー、ナビゲーション、フッター、..）

于 2012-10-11T21:46:04.443 に答える
0

display: inline-table;おそらくIEが不満を持っているのはそれだと言いました。代わりにインラインブロックを使用できますか? 次に、ドットを取り除くために、list-style: none

于 2012-10-11T21:44:52.637 に答える