CSS의 문제점

Question

IE의 css3 드롭 다운 메뉴 문제가 있습니다. 다음 HTML 탐색 메뉴에

/* Main Navigation */ 

#nav { 
list-style: none; 
margin-left: 30px; 
margin-right: -30px; 
z-index: 2000; 
} 

#nav li { 
float: right; 
position: relative; 
} 

#nav a { 
display: inline-block; 
height: 80px; 
line-height: 80px; 
font-weight: bold; 
font-size: 16px; 
color: #eee; 
padding: 0px 22px 0px 22px; 
text-shadow: rgba(0,0,0,0.1) 0px -1px 1px; 
} 

#nav li a.nav_tier1:hover, #nav .current_page_item a.nav_tier1 { 
    background: transparent url('../img/nav.bg.png') no-repeat center; 
} 

#nav li a.labs img { 
    margin: 0 0 0 6px; 
} 

/* Sub Navigation */ 

#nav .nav_2 { 
    display: none; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 150px; 
    position: absolute; 
    top: 80px; 
    left: 0; 
    z-index: 9999; 

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 

-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.5); 
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.5); 
box-shadow: 0px 0px 15px rgba(255,255,255,.5); 

background: #444; 
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#444), to(#222)); 
background: -webkit-linear-gradient(#444, #222); 
background: -moz-linear-gradient(#444, #222); 
background: -ms-linear-gradient(#444, #222); 
background: -o-linear-gradient(#444, #222); 
background: linear-gradient(#444, #222); 
-pie-background: linear-gradient(#444, #222); 
behavior: url(/media/htc/PIE.htc); 
} 

#nav .nav_2 li { 
    float: none; 
    margin: 0; 
    padding: 0; 
    list-style: none; 

    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
} 

#nav .nav_2 li:last-child { 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

#nav .nav_2 .nav_tier2 a { 
display: block; 
    height: 50px; 
    line-height: 50px; 
float: none; 
} 

#nav li:hover > .nav_2 { 
    display: block; 
} 

*html #nav li:hover /* IE6 */ { 
display: block; 
} 

#nav .nav_2 li a:hover { 
    color: #CF982B; 
} 

/** Triangle Tip **/ 

#nav .nav_2 li:first-child a:after { 
    content: ''; 
    position: absolute; 
    left: 25px; 
    top: -15px; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 15px solid #444; 
z-index: 3000; 
} 

#nav .nav_2 li:first-child a:hover:after { 
border-bottom-color: #444; 
} 

/** END Triangle Tip **/ 

/** END Sub Navigation **/ 

/* Clear floated elements */ 
#nav:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 

*html #nav    { zoom: 1; } /* IE6 */ 
*:first-child+html #nav { zoom: 1; } /* IE7 */ 

/** END Main Navigation **/ 

응용 : IE7/9분의 8

이 작품을 제외한 모든 브라우저에서

<ul id="nav" class="grid_6"> 
    <li> 
     <a href="/labs/" class="nav_tier1">Labs</a> 
    </li> 
    <li> 
     <a href="/contact/" class="nav_tier1">Contact</a> 
    </li> 
    <li> 
     <a href="/blogs/" class="nav_tier1">Blogs</a> 
    </li> 
    <li> 
     <a href="/portfolio/" class="nav_tier1">Portfolio</a> 
     <ul class="nav_2"> 
      <li> 
       <a href="/presentations/" class="nav_tier2">Presentations</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

작품 다음과 같은 CSS로

완벽하게 사파리, 크롬, 파이어 폭스하지만 IE7/IE8/IE9에서 처음으로 내가 포트폴리오 링크를 가리키면, 프레 젠 테이션 하위 메뉴 항목 않습니다 IE에서 제대로 표시되지 않습니다.

하위 메뉴 항목의 앵커 태그에 마우스를 가져 가면 메뉴 항목이 올바르게 표시됩니다.

또한 하위 메뉴 항목에서 마우스를 가져 가면 "고스트"메뉴 항목 문제가있는 것으로 보입니다.

내가 자식 메뉴 항목에서 멀리 가져 가면 게재

고스트 메뉴 -

처음까지 하위 메뉴 항목로드,이 같은 잘못 최대로드 -

Answer 1

ie6/7이 인라인 블록과 다르다면 외부 링크를 추가하고 css abit를 수정하여 원하는 결과를 얻을 수 있습니다.

<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->