jquery - jQuery Accordion 和 IE7 的分层问题

Question

我对 jQuery Accordion 插件和 IE7 有一个奇怪的问题(可能更早，还没有在那里测试过)。我正在使用使用 ThemeRoller 构建的自定义 jQuery UI 主题。我对它进行了一些调整以调整颜色、边距和边框。 Accordion 位于 DIV 中，而 DIV 又嵌套在我的主要内容中。简化标记和 CSS 如下。基本上，内容是一个由边框包围的居中框。菜单偏移到框顶部下方并 float 在左边缘。

问题是，在 IE7 中，一旦我将鼠标悬停在菜单上，底层 main DIV 的边框就会通过 Accordion 显示。这不会发生在 FF 或 Safari 中。问题是，为什么默认的 Accordion CSS 将 z-index 设置为 1？所有这些元素不应该显示在它们后面的 DOM 元素之上吗？为什么只在悬停时？

我已经解决了这个问题，并将解决方案作为答案发布。

<div id="main" style="position: relative;">
    <div id="main-menu">
        <ul id="navigation" class="ui-accordion">
            <li>
                <div class="ui-accordion-header">
                </div>
                <div class="ui-accordion-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#main
{
    clear: both;
    padding: 30px 30px 30px 30px;
    background-color: #fff;
    border: solid 1px #669933;
    margin-bottom: 30px;
    min-height: 500px;
    height: auto !important;
    height: 500px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main-menu
{
    position: absolute;
    top: 1em;
    left: -1em;
}

#navigation
{
    width: 10em;
}

/*UI accordion*/
.ui-accordion {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
/* additions from default */
    background-color: #ffffff;
    color: #333333;
    border: solid 1px #336600;
    text-indent: 0.2em;
    z-index: 1;
}

Answer 1

在尝试在各种 .ui-accordion 类上显式设置 z-index 之后，我决定退回一级。事实证明，在 main-menu DIV 上设置一个 z-index(为 1)可以解决 IE7 中的问题。请注意，主 .ui-accordion 类上的 z-index 始终存在。将 ui-accordion 类应用于 main-menu div 会破坏布局，我认为将 z-index 也简单地添加到主菜单比尝试重新设置样式更容易适用于应用的 ui-accordion 类。