只有在IE9下拉菜單的問題

我有一個完美工作的CSS下拉菜單/彈出式菜單，只有在IE9的問題。與IE9的問題是，當我把它徘徊足夠快的菜單工作，我必須是超精確的。只有在IE9下拉菜單的問題

這裏是我的CSS：

#meta_menu > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 5px 0px 0px 0px; 
    background-color: rgb(250,250,250); 
    text-align: left; 
    position: absolute; 
    top: 55px; 
    left: 50%; 
    margin-left: -90px; 
    margin-top: -40px; 
    width: 180px; 
-webkit-transition: all .3s .1s; 
    -moz-transition: all .3s .1s; 
    -o-transition: all .3s .1s; 
     transition: all .3s .1s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); 
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); 
     z-index:5000; 
} 

#meta_menu > ul > li:hover > ul { 
    opacity: 1; 
    top: 65px; 
    visibility: visible; 
} 

#meta_menu > ul > li > ul:before{ 
    content: ''; 
    display: block; 
    border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #FAFAFA; 
    border-style: solid; 
    border-width: 10px; 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    margin-left: -10px; 
} 

#meta_menu > ul ul > li { 
position: relative; 
margin:0px; 
z-index: 1; 
} 

#meta_menu ul ul a{ 
    color: rgb(50,50,50); 
    font-family: FuturaTT,Georgia,Palatino,Times New Roman,serif; 
    font-size: 13px; 
    background-color: rgb(250,250,250); 
    padding: 5px 8px 7px 16px; 
    display: block; 
-webkit-transition: background-color .1s; 
    -moz-transition: background-color .1s; 
    -o-transition: background-color .1s; 
     transition: background-color .1s; 
    font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Arial,Helvetica,sans-serif; 
} 

#meta_menu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} 

#meta_menu ul ul a{ 
background:none; 
} 

#meta_menu ul ul a:hover{ 
    color:#888 !Important; 
}

我的HTML：

<div id="meta_menu"> 
       <ul> 
        <li><a href="#">NOTIFICATIONS <span class="notifications badge">0</span></a></li> 
        <li class="has-sub"><a href="#">RECENT PAGES</a> 
         <ul> 
          <li><a href='#'>Page 1</a></li> 
          <li><a href='#'>Page 2</a></li> 
          <li><a href='#'>Page 3</a></li> 
          <li><a href='#'>Page 4</a></li> 
         </ul> 
        </li> 
        <li class="meta_last"><a href="#" class="tips sign_out">SIGN OUT</a></li> 
      </ul> 
     </div>

一個人怎麼解決這些種與IE瀏覽器的問題？你有與IE一致的一般準則嗎？我試過嘗試把寬度100％放到li元素/試過的設置顯示塊/縮放1它在某些情況下爲我工作，但不是。任何人都可以推薦我從哪裏開始？

這裏是一個小提琴代碼複製問題：

http://jsfiddle.net/phKsk/2/

來源

2013-08-27 London

我在這裏複製你的代碼： http://jsfiddle.net/phKsk/它在我的IE9上正常工作。對你起作用嗎？ –

@HenriqueFeijo我已經更新了一個小提琴，它似乎有問題，當它的下面不在一邊。嘗試自己當你懸停在最近的頁面，然後去右頁外消失..這裏更新小提琴http://jsfiddle.net/phKsk/2/謝謝 – London

的問題是，IE9不支持CSS過渡。

在所有其他瀏覽器上，當您將鼠標懸停在最近的頁面上時，您將有0.3秒（在您的css中定義）在它消失之前到達子菜單，並且一旦到達它就不會消失。由於IE9不支持轉換，因此基本上有0秒，直到您將鼠標懸停在子菜單上。

所以在IE9中解決這個問題的唯一方法是讓子菜單觸及鏈接RECENT PAGES。

如果您在#meta_menu> ul>裏添加> UL以下

margin-top: -30px; 
padding-top: 30px;

你會明白我在說什麼。當然這個代碼會混淆子菜單的設計，但是你可以通過在UL周圍使用一個容器來達到同樣的效果。

來源

2013-08-28 20:05:02

只有在IE9下拉菜單的問題

回答

相關問題