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/8月9日

この作品を除いて、すべてのブラウザで

<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で

Safari、Chrome、Firefoxは完全にIE7/IE8/IE9で、初めてポートフォリオリンクにカーソルを合わせると、プレゼンテーションの子メニュー項目はn IE上で正しく表示されません。

子メニュ​​ー項目のアンカータグにカーソルを合わせると、メニュー項目が正しく表示されるようになりました。

さらに、子メニュー項目の上にマウスを置くと、「ゴースト」メニュー項目の問題が発生しているようです。私は離れて、子メニュー項目から置くと現れて

ゴーストメニュー -

子メニュ​​ー項目をアップロード最初の時間は、それはこのように誤っアップロード -

Answer 1

ie6/7がインラインブロックに似ていない場合は、外部リンクを追加してcss abitを変更して、必要な結果を得ることができます。インラインブロックとうまく再生されない6/7すなわち

<!--[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]-->