jQuery 手风琴和 IE7 的分层问题
我对 jQuery 手风琴插件和 IE7 有一个奇怪的问题（也许更早，还没有在那里测试过）。 我正在使用使用 ThemeRoller 构建的自定义 jQuery UI 主题。 我对其进行了一些调整以调整颜色、边距和边框。 手风琴位于 DIV 内，而 DIV 又嵌套在我的主要内容内。 简化的标记和 CSS 如下。 基本上，内容是一个被边框包围的居中框。 菜单偏移到框顶部下方并浮动到左边缘。
问题是，在 IE7 中，一旦我将鼠标悬停在菜单上，底层 main DIV 的边框就会通过手风琴显示。 在 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;
}
I have a strange problem with the jQuery accordion plugin and IE7 (and maybe earlier, haven't tested there). I'm using a customized jQuery UI theme built with ThemeRoller. I've tweaked it some to adjust colors, margins, and borders. The accordion is located inside a DIV which is, in turn, nested inside my main content. Simplified mark up and CSS is below. Basically the content is a centered box surrounded by borders. The menu is offset below the top of the box and floats over the left edge.
The problem is that in IE7 once I had hover over the menu, the borders from the underlying main DIV show through the accordion. This doesn't happen in FF or Safari. The question is why, since the default accordion CSS sets a z-index of 1? Shouldn't all of those elements display over the top of the DOM elements behind them? And why only on hover?
I've already solved this problem and will post the solution as an answer.
<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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在尝试在各种 .ui-accordion 类上显式设置 z 索引后，我决定备份一个级别。 事实证明，在
main-menuDIV 上设置 z-index（1）可以解决 IE7 中的问题。 请注意，主 .ui-accordion 类上的 z-index 始终存在。 将 ui-accordion 类应用于main-menudiv 会破坏布局，我认为简单地将 z-index 添加到主菜单中也更容易，而不是尝试重新设置它的样式与应用的 ui-accordion 类一起使用。After trying to explicitly set a z-index on the various .ui-accordion classes, I decided to back up one level. It turns out that setting a z-index (of 1) on the
main-menuDIV solves the problem in IE7. Note that the z-index on the main .ui-accordion class was always there. Applying the ui-accordion class to themain-menudiv breaks the layout and I figured it was easier to simply add the z-index to the main-menu, too, rather than try to restyle it so that works with the ui-accordion class applied.