css - 下拉菜单中的文本忽略 IE7 中的 z-index

Question

问题:“第 2 层”中的子菜单文本位于“第 3 层”中的子菜单文本的前面。奇怪的是，ul 没有，只​​有文本。

http://i41.tinypic.com/ajuhz6.jpg

我知道 IE7 中有一个与 z-index 有关的错误。通常在这种情况下，我会通过为其中一个外部容器提供比子容器更高的 z-index 来解决 IE7 中的问题。

如果有人因为遇到同样的问题而阅读本文，我建议您先尝试:- http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

到目前为止，我没有任何效果，我已经尝试了 Stack Overflow 和其他地方发布的许多解决方案。

这是我的代码...我有一个简单的分层下拉菜单，具有以下 HTML 结构:

<div id="wdk_header-container">

<div>...</div>

<div class="wdk_menu-container">

    <ul class="wdk_menu-ul wdk_tier_1">
        <li class="wdk_menu-item wdk_level_1">

            <a href="/"><span>Menu Text</span></a>

            <ul class="wdk_sub_menu wdk_tier_2">
                <li class="wdk_menu-item wdk_level_2">

                    <a href="/"><span>Menu Text</span></a>

                    <ul class="wdk_sub_menu wdk_tier_3">
                        <li class="wdk_menu-item wdk_level_3">

                            <a href="/"><span>Menu Text</span></a>

                        </li>
                    </ul>

                </li>
            </ul>

        </li>
    </ul>

</div>


<div>...</div>
<div>...</div>


</div>

我无法编辑菜单的结构。如您所见，最外面的容器中还有其他 div。

我使用以下 jQuery 来显示和隐藏菜单层:

$(function(){

$("ul.wdk_menu-ul li").hover(function(){

    $('ul:first',this).css('visibility', 'visible');

}, function(){

    $('ul:first',this).css('visibility', 'hidden');

});

});

以下 CSS 在 Firefox 和 Chrome 中工作正常，但在 IE7 中不工作。

<style>

/* All Menu Items */
.wdk_menu-container ul {
    list-style: none; display: inline;
    margin: 0px; padding: 0px;
}
.wdk_menu-container ul li {
    float: left; height: 33px; position: relative; display: block;
}
.wdk_menu-container ul li a {
    display: block; height: 100%;
}

/* Sub Menu */
ul.wdk_sub_menu.wdk_tier_2 {
    float: left; z-index: 5; position: absolute;
}

ul.wdk_sub_menu.wdk_tier_2 a {
    line-height: 16px; padding: 6px 10px;
}

.wdk_menu-container ul.wdk_sub_menu.wdk_tier_2 li a span {
    display: inline-block;
}

/* Sub Sub Menu */
ul.wdk_sub_menu.wdk_tier_3 {
    float: left; z-index: 6; position: absolute; left: 34px;
}

</style>

我将为 IE7 创建一个单独的样式表。欢迎任何建议，这让我发疯。如果您需要更多信息，请询问!谢谢!

Answer 1

您遇到此问题是因为您将 position:absolute 与 z-index 一起应用于元素。这在 IE7 中不起作用。您需要改用 position:relative(并找到另一种巧妙定位子菜单的方法)。 http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7