sukerfish 드롭 다운 메뉴의 인터넷 익스플로러 문제

Question

IE의 드롭 다운 메뉴에서만 문제가 발생하고 다른 결과가 다양한 버전으로 전송됩니다.

I가 참고로하는 것에있어 탐색은 여기있다 : http://lt.philosophydesign.com/

그것은 작동하고 파이어 폭스/사파리/크롬에서 잘 표시됩니다. IE9와 IE8에서는 문제가 없지만 드롭 다운의 첫 번째 항목을 탐색하려고하면 드롭 다운이 사라집니다. IE7과 IE6에서는 드롭 다운이 본체 내용 뒤에 표시됩니다.

내용이 이상한 점은 <div id="content">의 내용을 제거하면 탐색이 IE9 및 IE8에서 올바르게 표시되고 작동한다는 것입니다. 여기

탐색 CSS입니다 :

/* 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입니다 :

<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를이를 지원 나던 IE7 <으로 LI 공중 선회하는 클래스를 추가해야합니다 : 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 및 ~ #content에 추가하십시오. 이것은 IE8과 9와 같은 결과를 줄 것입니다.

결과는 li 사이의 공백 때문에 발생합니다. 당신이 충분히 빨리 움직이면 더 낮은 항목을 선택할 수 있습니다. 나는 그것을 지금 고치고있다. 이 여기에 모든 브라우저에서 작동하지만 것이다

편집

100 % 당신이 이동 : 문제는 쉽게 해결됩니다 드롭 다운 UL에 배경 색상을 추가하여. 이게 바람직하지 않다고 가정하면 문제를 해결하고 미학을 유지할 수있는 1px 투명 gif (작은 파일이어야 함)로 1px 배경을 추가하는 것입니다.

약간의 해킹이 있지만 IE는 그런 종류의 브라우저입니다!

편집

을하는 데 도움이

희망하지만 IE9에서 깜짝 그것은 나던 작품은 내가 IE6 문제가 자바 스크립트로 생각합니다. 선택자에서 '>'을 사용해보세요. 이것은 아래 예제에서와 같이 요소의 직접적인 자식을 가져옵니다. 이 방법을 사용하면 섹션 드롭 다운 목록에서 mouseoff를 눌렀을 때 함수가 실행되지 않습니다.이 또한 일찍 발사에 기여할 수있는 문서의 흐름에서 UL를 제거

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

위치 가입일 : 또한이 코드 (완전히 테스트되지 않은 확실히 필요로하는 정제)를보십시오.