3

異なるブラウザの2つの異なる場所に配置されたサブナビゲーションがありますが、その理由はわかりません。topの代わりにmargin-topを使用するとこれが修正されることはわかっていますが、問題は、サブナビゲーションが表示されるときにjQueryスライドアニメーションがあり、margin-topを使用すると表示されないため見栄えが悪いことです。それよりもさらに上に。これが違いの写真です：

http://jsfiddle.net/eAqev/ <-JS Fiddle

InternetExplorerとGoogleChromeの違い

HTML：

    <div id="navigation">
        <ul>
            <li><h1>01. About</h1><h2>Learn about us</h2></li>
            <li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
                <ul class="scrollDown">
                    <li><p>Kitchen Worktops</p></li>
                    <li><p>Upstands/Splashbacks</p></li>
                    <li><p>Gables/ Panels</p></li>
                    <li><p>Glass</p></li>
                    <li><p>High Gloss</p></li>
                    <li><p>Bathroom Tops</p></li>
                    <li><p>Sinks/ Taps</p></li>
                </ul>
            </li>
            <li><h1>03. Contact</h1><h2>Contact us!</h2></li>
            <li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
        </ul>
    </div>

CSS：

#navigation ul {
    display: inline;
    position: relative;
}

#navigation ul li {
    float: left;
    width: 200px;
    height: 35px;
    margin: 10px;
    list-style: none;
    border-bottom: 3px solid #ccc;
}

#navigation ul li:hover {
    border-bottom: 6px solid #eee;
    cursor: pointer;
}

#navigation ul ul {
    position: absolute;
    z-index: 1500;
    margin: 0;
    padding: 0;
    list-style:none;
    background: #fff;
    width: 200px;
    top: 60px;
    opacity:0.95;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
}
4

5 に答える 5

5

すべてを明確にしました以下のコードを追加するだけで問題が解決します

    #navigation ul ul {
    position: absolute;
    z-index: 1500;
    margin: 0 !important;
    padding: 0 !important;
    list-style:none;
    background: #fff;
    width: 200px;
    top: 60px;
    opacity:0.95;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
     }  


      #navigation ul {
      display: inline;
      z-index:10;
       position: relative;
        }

おそらくIE7にはバグのある環境があります。これはIE8+で正常に機能します。

于 2012-11-07T11:47:45.873 に答える
2

デモ

こんにちは今あなたのIDを追加するよりもあなたのIDを 定義 します#navigation ul display:inline-block; #navigation ul ultop

このように

    #navigation ul {
        display: inline-block;
        position: relative;
        vertical-align: top;
    }
 #navigation ul ul {
        top:48px;
    }

ライブデモ

于 2012-11-07T11:59:46.827 に答える
0

css-resetを試してみるべきかもしれませんか？cssの先頭に置くだけですが、レイアウトが乱れる可能性があるため、自分でいくつかの値を設定する必要があります。

于 2012-11-07T11:46:32.720 に答える
0

これを試して：

    #navigation ul li {float: left;
 width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
于 2012-11-07T11:53:52.120 に答える
0

ブラウザが異なれば、ul/li要素のデフォルトのマージンとパディングも異なります。これらすべてを0にリセットしてみましたか？

#navigation ul, #navigation li {
    padding: 0px;
    margin: 0px;
}
于 2012-11-07T11:44:43.363 に答える