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

Question

问题 我已经尝试了很多方法来使 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
}

需要

splinter

这是我的 fiddle : 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