由于 z-index 错误，堆叠式菜单在 ie7 中无法工作

Question

我最近接手了一位同事正在进行的一个项目，但我遇到了 IE 7 bug 的问题。基本上，我正在构建一个页面，底部有一个 div，内部（后、中、前）有 3 个 UL 堆叠在一起，每个 li 内都有一个带有背景图像的链接。

我想要实现的是，当您滚动其中一个链接时，它的 z 索引将设置为高于所有其他 li 的 z 索引，因此无论它位于哪一行，li 都会被带到前面。我已经成功在 FF、IE8 和 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 有一些问题）是重新考虑所有 li 都在同一个 ul 中。它不应该给您带来太多麻烦并解决问题。