由于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中。它不应该让你陷入困境并解决问题。