jqueryaccordion和IE7的分层问题
我对jQueryAccordion插件和IE7有一个奇怪的问题(也许更早,还没有测试过)。我使用的是用ThemeRoller构建的定制jQueryUI主题。我对它进行了一些调整,以调整颜色、边距和边框。手风琴位于一个DIV中,而DIV又嵌套在我的主要内容中。下面是简化的标记和CSS。基本上,内容是一个以边框为中心的框。菜单在框的顶部下方偏移,并浮动在左边缘上方 问题是,在IE7中,一旦我将鼠标悬停在菜单上,底层jqueryaccordion和IE7的分层问题,jquery,html,css,jquery-plugins,accordion,Jquery,Html,Css,Jquery Plugins,Accordion,我对jQueryAccordion插件和IE7有一个奇怪的问题(也许更早,还没有测试过)。我使用的是用ThemeRoller构建的定制jQueryUI主题。我对它进行了一些调整,以调整颜色、边距和边框。手风琴位于一个DIV中,而DIV又嵌套在我的主要内容中。下面是简化的标记和CSS。基本上,内容是一个以边框为中心的框。菜单在框的顶部下方偏移,并浮动在左边缘上方 问题是,在IE7中,一旦我将鼠标悬停在菜单上,底层mainDIV的边框就会通过手风琴显示出来。这在FF或Safari中不会发生。问题是为
main
DIV的边框就会通过手风琴显示出来。这在FF或Safari中不会发生。问题是为什么,因为默认的手风琴CSS将z索引设置为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>
在尝试显式地为各种.ui accordion类设置z索引之后,我决定备份一个级别。事实证明,在
主菜单
DIV上设置z索引(1)可以解决IE7中的问题。请注意,main.ui accordion类上的z索引始终存在。将ui-accordion类应用到主菜单
div会破坏布局,我认为简单地将z-index添加到主菜单也会更容易,而不是尝试重新设置其样式以便与应用的ui-accordion类一起工作
#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;
}