1

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

问题是，在 IE7 中，一旦我将鼠标悬停在菜单上，来自底层mainDIV 的边框就会通过手风琴显示。这在 FF 或 Safari 中不会发生。问题是为什么，因为默认的手风琴 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;
}
4

1 回答 1

2

在尝试在各种 .ui-accordion 类上显式设置 z-index 之后，我决定备份一个级别。事实证明，在main-menuDIV 上设置 z-index（为 1）可以解决 IE7 中的问题。请注意，主 .ui-accordion 类上的 z-index 始终存在。将 ui-accordion 类应用到main-menudiv 会破坏布局，我认为将 z-index 简单地添加到主菜单也更容易，而不是尝试重新设置它的样式以便与应用的 ui-accordion 类一起使用。

于 2009-03-11T15:07:48.530 回答