jquery - 由于 z-index 错误，堆叠式菜单在 ie7 中不起作用

Question

我最近接手了一个同事正在做的元素，我遇到了一个 IE 7 错误形式的砖墙。基本上，我正在构建一个底部有一个 div 的页面，其中 3 个 UL 在内部(背面、中间、正面)彼此堆叠，每个 li 内都有一个带有背景图像的链接。

我想要实现的是，当您滚动其中一个链接时，它的 z-index 设置为高于所有其他 lis 的 z-index，因此 li 被带到前面，无论它在哪一行。我已经在 FF、IE8 和 Chrome 中完美地做到了这一点，但 IE6 和 7 根本无法正常工作。

我知道这里提到的 z-index 错误:http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/并尝试通过在 li 上添加比 a 更高的 z-index 值来解决它，但无济于事。我可以将 li 置于最前面的唯一方法是为 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 有一些问题)是重新考虑同一个 ul 中的所有 li。它不应该给您带来太多麻烦并解决问题。