1

次の HTML プログラムを使用して、水平サブ メニューを含む水平メニュー バーを作成します。Fire Fox と Chrome では正常に動作していましたが、IE では動作しません。このプログラムで必要な変更は何ですか?

<html>    
<head>          
<style>       
    /* Targeting both first and second level menus */

#nav li {
    list-style:none;
    float: left;
    position: relative;
}
#nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}
#nav li a:hover {

    background-color:red;
    color:#FFF;
    opacity:1;
}

/* Targeting the first level menu */
#nav {  
    top:150px;
    min-width:850px;
    background:#fff;
    opacity:0.5;
    display: block;
    height: 34px;
    z-index: 100;
    position: absolute;
}
#nav > li > a {
}

/* Targeting the second level menu */
#nav li ul {
    color: #333;
    display: none;
    position: absolute; 
    width:850px;
}
#nav li ul li {
    display: inline;
}
#nav li ul li a {
    background: #fff;
    border: none;
    line-height: 34px;
    margin: 0;
    padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
    background-color:red;
    color:#FFF;
    opacity:1;
}

/* Third level menu */
#nav li ul li ul{
    top: 0;
}
ul.child {
background-color:#FFF;  
}
/* A class of current will be added via jQuery */
#nav li.current > a {
    background: #f7f7f7;
    float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
    left:0;
    top:34px;
    display:inline;
    position:absolute;
    text-align:left;
}
#nav li:hover > ul.grandchild  {
    display:block;
}       

</style>        
</head>       
<body>

 <ul id="nav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul class="child">
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a>
                <ul class="child">
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul class="child">
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>         
</body>
    </html>
4

2 に答える 2

0

modernizrを使用していますか？または、レガシーIEブラウザで利用可能なクラスがありますか？IE用に別々のスタイルやスタイルシートをいじってみることをお勧めします。

または

ナビゲーションをフロートブロックから「インライン」要素に切り替えることができます。これは、フロートでうまく機能しないIE6などの古いブラウザーが認識します。

または

フロートを使い続けたい場合は、フロート要素の「幅」を設定していることを確認してください。

Chris Coyierが、フロートに関するすばらしい記事を掲載しています。この記事には、「フロートの問題」というラベルのセクションが含まれています。http: //css-tricks.com/all-about-floats/

于 2013-03-19T05:22:03.907 に答える
0

なんらかの理由で、フィドル サイトを IE8 でまったく動作させることさえできません...? しかし、あなたの CSS で気付いた 1 つの問題は、不透明度です。IE8 は opacity プロパティをサポートしていません。古い IE で要素の不透明度を変更するにはfilter:alpha(opacity=75);、値 75 は opacity プロパティのような小数ではなく、1 から 100 までの整数であることに注意してください。もっと助けになればいいのにと思いますが、フィドルに何が問題なのかさえわかりません...

于 2013-03-19T05:56:04.437 に答える