Question

我最近接手了一个同事正在进行的项目，我遇到了一个IE 7错误形式的砖墙。基本上，我正在构建一个底部有一个div的页面，其中3个UL在内部（后面，中间，前面）堆叠在一起，每个li内部都有一个带有背景图像的链接。

我想要实现的是当你滚动其中一个链接时，它的z-index设置得高于所有其他lis，并且li因此被带到前面，而不管它在哪一行。我已经设法在FF，IE8＆amp; Chrome但IE6＆amp; 7根本就不打球。

我知道这里提到的z-index错误：http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/并试图通过在li上添加比a更高的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有一些问题）来实现你想要的是重新考虑同一个ul中的所有li。它不应该让你遇到太多麻烦并解决问题。

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

1 个答案: