0

次のドロップアップメニューの例を見ました。

http://jsfiddle.net/W5FWW/360/

html：

<div id="menu">
    <ul>
        <li><center><a href="#">Home</a></center>
                <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Disclaimer</a></li>
                </ul>
        </li>
    </ul>
</div>​

この例は、Chromeでは完全に機能しますが、IE 9では機能しません
。[メニュー]リンクにカーソルを合わせると、メニューが開くはずです。
（jsfiddleで開くと機能しますが、htmlファイルにコピーしてこれを個別に実行すると失敗します）

これがChromeで機能し、IE 9では機能しないのはなぜですか？私に何ができる？

ありがとう！

4

4 に答える 4

2

Doctypeセットがありません。

<!DOCTYPE>「注：IEでは、：hoverセレクターが要素以外の要素で機能するように宣言する必要があります<a>。」 http://www.w3schools.com/cssref/sel_hover.asp

あなたはに持ってい:hoverます<li>：

#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;
}
于 2012-12-12T09:26:06.123 に答える
1

私はこれをテストしました：

  • Firefox 17.0.1
  • クローム21.0.1180.89m
  • IE 9.0.8112.16421

そしてそれは素晴らしい働きをします。

アドバイスの言葉と同じように、古いブラウザがサポートできない場合に備えて、キーナビゲーションにCSSドロップダウンを使用しないでください。重要な機能を失うリスクがあります。

また、DOCTYPEによって異なります。<center>は廃止されたため、代わりにCSSを使用してセンタリングすることを検討する必要があります。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css" />
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="menu">
            <ul>
                <li class="centretext"><a href="#">Home</a>
                        <ul>
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">Disclaimer</a></li>
                        </ul>
                </li>
            </ul>
        </div>​
    </body>
</html>
于 2012-12-12T09:27:17.487 に答える
1

これを失敗させる唯一の方法は、IEをQuirksモードにすることです。ファイルに有効なDoctypeがあり、問題がないことを確認してください。これが問題ではないかどうかアドバイスしてください:)

于 2012-12-12T09:28:23.733 に答える
1

これは、IE7/8/9およびその他のブラウザーで動作する完全なコードです。Doctype宣言を読んでください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div, ul, li{ padding:0; margin:0; list-style:none;}
#menu { 
    margin-top: 100px;
    float: left;
    line-height: 10px; 
    left: 200px;}
#menu a { 
    display: block; 
    text-decoration: none; 
    color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover { 
    background: #ECF1E7; 
    padding-left:9px;
    border-left: solid 1px #000;}
#menu ul li ul li {
    width: 140px; 
    border: none; 
    color: #B0BD97;  
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #B0BD97;
    z-index:1;
}
#menu ul li ul li a { 
    font: 11px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px;}
#menu ul li {
    float: left; 
    width: 146px; 
    font-weight: bold; 
    border-top: solid 1px #283923; 
    border-bottom: solid 1px #283923; 
    background: #979E71;}
#menu ul li a { 
    font-weight: bold;
    padding: 15px 10px;}
#menu li{ 
    position:relative; 
    float:left;}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 140px;}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block;}
#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;}
#menu:hover ul li:hover ul { 
    position: absolute;
    margin-top: 1px;
    font: 10px;
}
#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}​
</style>
</head>

<body>
<div id="menu">
    <ul>
        <li><center><a href="#">Home</a></center>
                <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Disclaimer</a></li>
                </ul>
        </li>
    </ul>
</div>​
</body>
</html>
于 2012-12-12T09:32:58.480 に答える