由於z-index錯誤，堆疊式菜單在ie7中不起作用

Question

我最近接手了一個同事正在進行的項目，並且我以IE 7 bug的形式出現在磚牆上。基本上，我正在構建一個底部帶有3個UL的頁面，其內部（背面，中間，正面）內部堆疊在一起，每個裏面都有一個帶有背景圖像的鏈接。

我想要實現的是當您翻轉其中一個鏈接，然後將其z-index設置爲高於所有其他lis的值，並且li因此被帶到前面，而不管它在哪個行中我已經在FF中完成了這項工作，IE8 & Chrome，但IE6 & 7根本就沒有打球。

我知道這裏提到的z-index bug：http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/，並試圖通過在li上添加比z更高的z-index值來解決它，但無濟於事。我可以把李的前面的唯一方法是給ul本身賦予更高的價值，但是這當然會把整套鏈接帶到我不想要的前面。有任何想法嗎？

我會發佈一個鏈接，但它是在工作，這是不是在防火牆外部訪問，所以在這裏我們開發服務器上是我的html代碼：

<div class="noMouseOut thumbnailWrap"> 
    <ul class="thumbnail_list noMouseOut back" style="width: 480px; left: 210px;"> 
     <li style="left: -48px;"><a style="background-image: url("images/back1.jpg"); width: 96px; height: 126px;" class="replace rollover" title="back row 1" href="">back row 1</a></li> 
     <li style="left: 433px;"><a style="background-image: url("images/back3.jpg"); width: 94px; height: 112px;" class="replace rollover" title="back row 4" href="">back row 4</a></li> 
    </ul> 
    <ul class="thumbnail_list noMouseOut middle" style="width: 680px; left: 130px;"> 
     <li style="left: -60px;"><a style="background-image: url("images/middle1.jpg"); width: 120px; height: 86px;" class="replace rollover" title="Middle 1" href="">Middle 1</a></li> 
     <li style="left: 131px;"><a style="background-image: url("images/middle2.jpg"); width: 78px; height: 104px;" class="replace rollover" title="Middle 2" href="#slide2">Middle 2</a></li> 
     <li style="left: 301px;"><a style="background-image: url("images/middle3.jpg"); width: 78px; height: 103px;" class="replace rollover" title="Middle 3" href="">Middle 3</a></li> 
    </ul> 
    <ul class="thumbnail_list noMouseOut front" style="width: 480px; left: 230px;"> 
     <li style="left: -25px;"><a style="background-image: url("images/front1.jpg"); width: 51px; height: 74px;" class="replace rollover" title="Front 1" href="">Front 1</a></li> 
     <li style="left: 135px;"><a style="background-image: url("images/front2.jpg"); width: 51px; height: 65px;" class="replace rollover" title="Front 2" href="">Front 2</a></li> 
    </ul> 
</div> 

的CSS如下：

#slideshow_menu ul.thumbnail_list { 
    position: relative; 
    display: inline-block; 
    float: left; 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    height: 128px; 
    } 

#slideshow_menu ul.thumbnail_list li { 
    float:left; 
    margin: 0px 2px; 
    } 

#slideshow_menu ul.thumbnail_list li a { 
    display: block; 
    } 


#slideshow_menu ul.back, #slideshow_menu ul.middle, #slideshow_menu ul.front { 
    position: absolute; 
    bottom: 0px; 
    height: 1%; 
    } 

#slideshow_menu ul.back li { 
    position:absolute; 
    bottom: 0px; 
    } 

#slideshow_menu ul.back li a { 
    height: auto; 
    display: block; 
    z-index: 20; 
    position: relative; 
    } 

#slideshow_menu ul.middle li { 
    position:absolute; 
    bottom: 0px; 
    } 

#slideshow_menu ul.middle li a { 
    height: auto; 
    display: block; 
    z-index: 30; 
    position: relative; 
    } 

#slideshow_menu ul.front li { 
    position:absolute; 
    bottom: 0px; 
    } 

#slideshow_menu ul.front li a { 
    height: auto; 
    display: block; 
    z-index: 40; 
    position: relative; 
    } 

#slideshow_menu ul.thumbnail_list li a:hover { 
    z-index: 80; 
    } 

任何幫助你們可以給我很大的幫助。

Answer 1

IE比較同一DOM級別元素的索引。最簡單的方法（也是我現在唯一可以考慮的方法 - 是的... IE 6/7 z-index有一些問題）要實現你想要的就是重新考慮所有li在同一個ul中。它不應該讓你陷入困境並解決問題。