CSS下拉列表中顯示，IE6，IE7，絕對定位錯誤

Question

我面對的，我曾經在CSS中發現的最瘋狂的一個問題...

我有兩個CSS-的jQuery水平下拉菜單，一個和一個在下面，點擊它時顯示下拉列表。

問題是當我點擊在IE6和IE7上下拉，和絕對定位的元素越過相對定位的。上部下拉列表（絕對）顯示下面的下拉（相對）。

的JavaScript：

$("button").click(function(e){ 
    $(".menu").hide(); 
    $(this).siblings(".menu").show(); 
    e.stopPropagation() 
}); 
$(document).click(function(){$(".menu").hide()}); 

HTML：

<div class="top"> 
    <div class="dropdown"> 
     <button>Dropdown1 v</button> 
     <div class="menu"> 
      <a href="#link">Option a</a> 
      <a href="#link">Option b</a> 
      <a href="#link">Option c</a> 
     </div> 
    </div> 
    <div class="dropdown"> 
     <button>Dropdown2 v</button> 
     <div class="menu"> 
      <a href="#link">Option d</a> 
      <a href="#link">Option e</a> 
      <a href="#link">Option f</a> 
     </div> 
    </div> 
</div> 

CSS：

.dropdown{float:left;display:inline;clear:left;position:relative} 
.menu{position:absolute;left:0;top:22px;z-index:1} 
.menu a{display:block} 

.menu{display:none;border:1px solid #ccc;padding:3px;background:#ffffe0} 

這裏的例子：

http://jsfiddle.net/AEBaW/

這裏的解決方案：

http://jsfiddle.net/AEBaW/2/

Answer 1

有一個已知的問題，在IE中的z-index。它對絕對定位元素的處理方式不同於對相對定位元素的z-索引。這就像你有兩組z指標。如果無法讓所有元素都使用相同的位置，您可以通過使用相同位置的包裝來修復它。

EDIT 1：

http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

編輯2：

z index bug

Z-Index IE bug fix?

Internet Explorer z-index bug?

EDIT 3：

個

jQuery的解決方案：

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

Answer 2

當我與IE工作的z-index問題我發現這是確保每一個容器是一樣堆疊的一部分的最佳解決方案-指數。意思是，所有元素都作爲同一個堆棧的層次。這通常會讓IE變得有趣。

您可以通過添加position:relative; z-index:auto;到所有的容器都這樣做。如果可能的話，您希望一直這樣做。這應該迫使IE瀏覽器考慮所有的堆棧，從而正確分層。