CSS HasLayout IE7 Bug -尝试缩放和溢出隐藏

Question

Problem我尝试过很多方法让position: relative / absolute / fixed在IE7中工作。我现在解决不了这个问题。

.levelTwo是具有pos: ab的元素，.levelOne是具有pos: rel的元素。

因此，所需的结果将是任何.levelTwo元素都在任何其他元素的前面/前端。目前他们坐在.levelOne a后面

标记

    <!-- Bof Level One-->
    <ul class="levelOne">
        <li><a href="#">Basic IT Access <span>&#9658;</span></a>
            <div class="levelTwo">
                jamie
            </div>
        </li>
    </ul>

CSS

.levelOne {
    border-top: 1px solid #DDD;
    list-style: none;
    position: relative;
}

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 170px;
    z-index: 10;
    /*tried*/
    display: inline-block;
    *zoom:1;
    overflow:hidden
}

期望的

​

​

断裂

​

​

这是我的小提琴：http://jsfiddle.net/hutber/2GvA4/

Answer 1

尝试下面的css规则，您的问题将解决

CSS:

.head0 .levelOne li { z-index:60; }
.head1 .levelOne li { z-index:50; }
.head2 .levelOne li { z-index:40; }
.head3 .levelOne li { z-index:30; }
.head4 .levelOne li { z-index:20; }
.head5 .levelOne li { z-index:10; }

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 162px; /* reduced the width here */
    display: block;
    z-index: 10;
}

屏幕截图：

​

​

参考链接：

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.satzansatz.de/cssd/onhavinglayout.html#rp