0

わかりましたので、ここにいくつかの同様の質問があることは知っていますが、私が読んだ解決策で問題を解決できないようです. 新しいウェブサイトを作っているのですが、メニューが Chrome と Firefox では横に表示されますが、古いバージョンの Internet Explorer や Internet Explorer の互換モードでは縦に表示されます。比較するスクリーンショットは次のとおりです。

クローム: http://imgur.com/ZQVKGya

Internet Explorer (互換モード): http://imgur.com/Q3z6VzW

メニューが壊れているように見えるだけでなく、いくつかの場所が間違っているように見えます。メニューを修正することは、開始するのに適した場所です。

HTMLコードは次のとおりです。

<div id="menu">
    <nav>
        <ul>
            <li>Home</li>
            <li>Tires
                <ul>
                    <li>Utility
                        <ul>
                            <li>Gripper</li>
                            <li>Radical</li>
                        </ul>
                    </li>
                    <li>Sport
                        <ul>
                            <li>Race-X</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Contact
                <ul>
                    <li>About us</li>
                    <li>Contact us</li>
                </ul>
            </li>
            <li>Dealers
                <ul>
                    <li>Locate a dealer</li>
                    <li>Become a dealer</li>
                </ul>
            </li>
            <li>Downloads</li>
        </ul>
    </nav>
</div>

CSSコードは次のとおりです。

#menu {
    height: 40px;
    width: 960px;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    float: left;
    -webkit-box-shadow: 0 5px 10px -2px #888;
    -moz-box-shadow: 0 5px 10px -2px #888;
    box-shadow: 0 5px 10px -2px #888;
    border-bottom: 1px solid #000;
    background: #333;
    font-family: 'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif;
}

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

nav ul {
    background: #333;
    background: linear-gradient(top, #000 0%, #4B4B4B 100%);  
    background: -moz-linear-gradient(top, #000 0%, #4B4B4B 100%); 
    background: -webkit-linear-gradient(top, #000 0%, #4B4B4B 100%); 
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

nav ul li {
    width: 20%;
    background: #333;
    -webkit-box-shadow: inset 0 0 1px #000;
    -moz-box-shadow: inset 0 0 1px #000;
    box-shadow: inset 0 0 1px #000;
    float: left;
}

nav ul li:hover {
    -webkit-box-shadow: inset 0 0 30px #000;
    -moz-box-shadow: inset 0 0 30px #000;
    box-shadow: inset 0 0 30px #000;
}

nav ul li.active {
    -webkit-box-shadow: inset 0 0 30px #000;
    -moz-box-shadow: inset 0 0 30px #000;
    box-shadow: inset 0 0 30px #000;
}

nav ul li a {
    display: block; 
    color: #FFF;
    text-decoration: none;
}

nav ul ul {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    width: 20%;
    background: #333;
    padding: 0;
    position: absolute;
    display: none;
    top: 100%;
}

nav ul ul li {
    width: 100%;
    float: none; 
    border-bottom: 1px solid #494949;
    position: relative;
}

nav ul ul li:hover {
    -webkit-box-shadow: inset 0 0 0 #868686;
    -moz-box-shadow: inset 0 0 0 #868686;
    box-shadow: inset 0 0 0 #868686;
    background: #868686;
    color: #FFF;
}

nav ul ul li a {
    line-height: 35px;
    height: 35px;
}   

nav ul ul li a:hover {
    background: #868686;
}

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

どんな助けでも大歓迎です！

4

2 に答える 2

1

IE がnav要素を認識していないようです。互換モードの IE は、マークアップを次のように解釈します。

<div id="menu">
    <nav />
        <ul>
            <li>Home</li>
            ...
        </ul>
</div>

nav要素がどのように自己クローズするかに注目してください。これは、どの CSS ルールもマークアップに一致しないことを意味します。(これは、新しいバージョンの IE にバンドルされている開発者ツールを使用して自分で確認できます - F12 を押します)

navへの参照を#menuに置き換えて、CSS ルールを変更することをお勧めします。これは、さまざまな IE バージョンで機能するはずです。

于 2013-06-18T04:35:40.033 に答える
1

上記の正解に追加するには...

HTML5 を使用する予定がある場合は、shim を含めます...

<!-- HTML5 shim -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2013-06-18T05:08:02.347 に答える