sukerfishドロップダウンメニューのInternet Explorerの問題

Question

IEのドロップダウンメニューに問題があり、Imがさまざまなバージョンにさまざまな結果を取得しています。

私がここで発見されたためにrefferingだナビゲーション：http://lt.philosophydesign.com/

それは作品とFirefox/Safariの/ Chromeで細かい表示されます。 IE9とIE8では正常に表示されますが、ドロップダウンの最初の項目を先にナビゲートしようとするとドロップダウンが消えます。 IE7とIE6では、本体の内容の後ろにドロップダウンが表示されますが、

私は<div id="content">のコンテンツを削除すると、ナビゲーションが表示され、IE9とIE8で正しく機能するということもあります。

<div id="navcontainer"> 
    <ul id="mainnav" class="nav"> 
    <li class="magenta<?php echo $selected['home']; ?>"><a href="/">Home</a></li> 
    <li class="lightblue<?php echo $selected['location']; ?>"><a href="/location">Location</a> 
     <ul> 
     <li><a href="/location/area/travel">Travel</a></li> 
     <li><a href="/location/area/parks">Parks</a></li> 
     <li><a href="/location/area/shops">Shops</a></li> 
     <li><a href="/location/area/leisure">Leisure</a></li> 
     <li><a href="/location/area/eatdrink">Eat &amp; Drink</a></li> 
     </ul> 
    </li> 
    <li class="green<?php echo $selected['specification']; ?>"><a href="/specification">Specification</a> 
     <ul> 
     <li><a href="/specification/area/general">General</a></li> 
     <li><a href="/specification/area/kitchen">Kitchen</a></li> 
     <li><a href="/specification/area/bedroom">Bedroom</a></li> 
     <li><a href="/specification/area/bathroom">Bathroom</a></li> 
     </ul> 
    </li> 
    <li class="limegreen<?php echo $selected['plans']; ?>"><a href="/plans">Plans</a> 
     <ul> 
     <li><a href="/plans/area/1bed">1 Bedroom Apartments</a></li> 
     <li><a href="/plans/area/2bed">2 Bedroom Apartments</a></li> 
     </ul> 
    </li> 
    <li class="grey<?php echo $selected['gallery']; ?>"><a href="/gallery">Gallery</a> 
     <ul> 
     <li><a href="/gallery/area/gallery">View Gallery</a></li> 
     </ul> 
    </li> 
    <li class="darkblue<?php echo $selected['about-us']; ?>"><a href="/about-us">About Us</a></li> 
    <li class="magenta<?php echo $selected['contact-us']; ?>"><a href="/contact-us">Contact Us</a></li> 
    </ul> 
</div> 

そして、私はいくつかのjQueryをサポートしてdoesntのIE7 <としてLIを推移するクラスを追加する必要があります。

/* Navigation */ 
div#navcontainer { 
    left:193px; 
    position:absolute; 
    top:108px; 
    width:767px; 
    z-index:1000; 
} 
div#navcontainer ul { 
    display:block; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    width:100%; 
} 
div#navcontainer ul li { 
    display:inline; 
    float:left; 
    margin-left:27px; 
    position:relative; 
} 
div#navcontainer ul li a { 
    color:#95006a; 
    display:block; 
    font-family:"LEWINRockwellExtraBoldRegular", "Arial Black", Gadget, sans-serif; 
    font-size:14px; 
    text-transform:uppercase; 
    text-decoration:none; 
} 
div#navcontainer ul li.lightblue:hover a, 
div#navcontainer ul li.lightblue.selected a, 
div#navcontainer ul li.lightblue.sfHover a { 
    color:#94CDF3; 
} 
div#navcontainer ul li.green:hover a, 
div#navcontainer ul li.green.selected a, 
div#navcontainer ul li.green.sfHover a { 
    color:#71B9AE; 
} 
div#navcontainer ul li.limegreen:hover a, 
div#navcontainer ul li.limegreen.selected a, 
div#navcontainer ul li.limegreen.sfHover a { 
    color:#BBD353; 
} 
div#navcontainer ul li.grey:hover a, 
div#navcontainer ul li.grey.selected a, 
div#navcontainer ul li.grey.sfHover a { 
    color:#A8A9AC; 
} 
div#navcontainer ul li.darkblue:hover a, 
div#navcontainer ul li.darkblue.selected a, 
div#navcontainer ul li.darkblue.sfHover a { 
    color:#1B2768; 
} 
div#navcontainer ul li.magenta:hover a, 
div#navcontainer ul li.magenta.selected a, 
div#navcontainer ul li.magenta.sfHover a { 
    color:#CC2D88; 
} 
div#navcontainer ul li ul { 
    position:absolute; 
    top:-9999px; 
    left:0; 
    width:195px; 
} 
div#navcontainer ul li:hover ul, div#navcontainer ul li.sfHover ul{ 
    top:17px; 
} 
div#navcontainer ul li ul li { 
    float:left; 
    margin-left:0; 
    width:195px; 
} 
div#navcontainer ul li ul li a { 
    display:block; 
    font-size:12px; 
    margin-top:1px; 
    padding: 2px 4px; 
} 
div#navcontainer ul li.lightblue ul li a {background:#94CDF3; color:#C9E6F9 !important;} 
div#navcontainer ul li.green ul li a {background:#71B9AE; color:#C3DBD6 !important;} 
div#navcontainer ul li.limegreen ul li a {background:#BBD353; color:#DFE9B0 !important;} 
div#navcontainer ul li.grey ul li a {background:#A8A9AC; color:#D3D4D5 !important;} 
div#navcontainer ul li.darkblue ul li a {background:#1B2768; color:#9092B0 !important;} 
div#navcontainer ul li.magenta ul li a {background:#CC2D88; color:#D399C0 !important;} 
div#navcontainer ul li.lightblue ul li a:hover, 
div#navcontainer ul li.green ul li a:hover, 
div#navcontainer ul li.limegreen ul li a:hover, 
div#navcontainer ul li.grey ul li a:hover, 
div#navcontainer ul li.darkblue ul li a:hover, 
div#navcontainer ul li.magenta ul li a:hover { 
    color:#fff !important; 
} 

そして、ここではナビゲーションのHTMLは次のとおりです。ここで

は、ナビゲーションCSSです： Aタグ以外に移動します。

$("div#navcontainer ul li").mouseenter(function() { $(this).addClass("sfHover"); }); 
$("div#navcontainer ul li").mouseleave(function() { $(this).removeClass("sfHover"); }); 

誰でも私がこのIEで動作しない理由を理解できますか？

おかげ

スコット

Answer 1

IE7の重なり順が他のブラウザに動作が異なります。 z-index:2~#headerとz-index:1~#contentを追加します。これにより、IE8と9と同じ結果が得られます。

この結果は、liの間のスペースが原因です。すばやく移動すると、下の項目を選択できます。私は今それのための修正を探しています。

EDIT

ない100％これは、すべてのブラウザで動作しますが、ここに行く： 問題は簡単にドロップダウンULに背景色を追加することによって解決されます。これは望ましくないと思うので、1px透明なgif（小さなファイルにする必要があります）の背景を追加して、問題を解決し審美的に維持してください。

IEはそのようなブラウザです！

EDIT

を助け

希望しかしIE9で驚いて、それdoesntの仕事は私がIE6の問題はあなたのJavaScriptであると思います。 セレクターで「>」を使用してみてください。これは、要素の直接の子を取得します（下の例のように）。このようにして、ドロップダウン・セクション・リストの1つをマウスで消すと、関数は起動しません。ポジショニングが、これは初期の発射それにも貢献することができ、文書の流れからULを削除するので

$("div#navcontainer > ul > li").mouseenter(function() { $(this).addClass("sfHover"); }); 
$("div#navcontainer > ul > li > ul").mouseleave(function() { $(this).parent().removeClass("sfHover"); }); 

：代わりにこのコードを（完全にテストされていないと間違いなく洗練を必要とする）してみてください。