IE7 Z-Index 问题（CSS 下拉菜单）

Posted 2023-03-06

技术标签:

【中文标题】IE7 Z-Index 问题（CSS 下拉菜单）【英文标题】：IE7 Z-Index Issue (CSS DropDown) 【发布时间】：2011-10-21 00:53:29 【问题描述】：

我使用 JQuery 和 CSS Tricks 尝试了一些不同的修复，但我似乎无法让我的下拉菜单覆盖在 IE7 中的手风琴滑块之上。它似乎在任何其他网络浏览器中都能正常工作。任何帮助将不胜感激。

代码 sn-ps::

<div class="shell">
<div class="border">
        <div id="header">
          <h1 id="logo"><img src="" class="logo" /></h1>

          <div class="cl">&nbsp;</div>
        </div>
        <div id="nav">      
            <ul class="menu">
                <li class="current_page_item"><a href="index.php?selected=1">Home</a></li> 
                <li ><a href="#">Applications</a> 
                    <ul class="sub-menu"> 
                        <li><a href="#">Sub1</a></li> 
                        <li><a href="#">Sub2</a></li> 
                        <li><a href="#">Sub3</a></li>
                    </ul> 
                </li> 
                <li ><a href="#">Products</a> 
                    <ul class="sub-menu"> 
                        <li><a href="#">Sub1</a></li> 
                        <li><a href="#">Sub2</a></li> 
                        <li><a href="#">Sub3</a></li> 
                        <li><a href="#">Sub4</a></li> 
                    </ul> 
                </li> 
                <li ><a href="#">News/Media</a></li> 
                <li ><a href="#">About Us</a></li> 
                <li ><a href="#">Contact</a></li> 
            </ul>   
        </div><!--end nav-->    
<div id="accordion-1">
    <dl>
        <dt>Slide 1</dt>
            <dd>
                <h2><img src="images/accordian/efficacy.jpg" />Slide 1</h2>
                <p>Slide 1</p>
            </dd>
        <dt>Slide 2</dt>
            <dd>
                <h2><img src="images/accordian/accuracy.jpg" />Slide 2</h2>
                <p>Slide2</p>
            </dd>
        <dt>Slide 3</dt>
            <dd>
                <h2><img src="images/accordian/cost.jpg" />Slide 3</h2>
                <p>Slide 3 </p>
            </dd>
    </dl>
</div>

CSS

/* --------- */
/* -- Nav -- */
/* --------- */
#nav  height:43px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;  
.menu  padding: 7px 6px 0 0; 
.menu li  margin: 0 5px; float: left; list-style:none; position:relative; border-right: 1px solid #DBDBDB; 
.menu a  display: block; padding:  8px 15px; margin: 0; color: #555; text-decoration: none; font-size: 15px; 
.menu .current a, .menu li:hover > a  color: #CA9800; 
.menu ul li:hover a, .menu li:hover li a  color: #555; 
.menu ul a:hover  background: #CA9800 !important; color: #fff !important; 
.menu ul  background: #eee; display: none; margin: 0; padding: 0; width: 250px; position: absolute; top: 35px; border: solid 1px #ddd; z-index:9000 !important; 
.menu li:hover > ul  display: block; 
.menu ul li  float: none; margin: 0; padding: 0; 
.menu ul a  font-size: 14px; 
.menu ul ul  left: 250px; top: -3px; 
.menu li.current_page_item a  color: #CA9800; 
.menu .sub-menu li.current_page_item a  color: #CA9800; 

/* --------------- */
/* -- ACCORDIAN -- */
/* --------------- */

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

.easy-accordiondisplay:block;position:relative;overflow:hidden;padding:0;margin:0
.easy-accordion dt,.easy-accordion ddmargin:0;padding:0
.easy-accordion dt,.easy-accordion ddposition:absolute
.easy-accordion dtmargin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;
.easy-accordion ddz-index:1;opacity:0;overflow:hidden
.easy-accordion dd.activeopacity:1;
.easy-accordion dd.no-more-activez-index:2;opacity:1
.easy-accordion dd.activez-index:3
.easy-accordion dd.plusz-index:4
.easy-accordion .slide-numberposition:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);


/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

dd pline-height:120%

#accordion-1width:800px;height:245px;padding:20px;background:#fff;margin:0 0 0 60px; z-index:1;
#accordion-1 dlwidth:800px;height:245px   
#accordion-1 dtheight:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: arial, sans-serif; text-transform:uppercase;letter-spacing:1px;background:#fff url(../images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#BF8530
#accordion-1 dt.activecursor:pointer;color:#fff;background:#fff url(../images/slide-active.jpg) 0 0 no-repeat
#accordion-1 dt.hovercolor:#BF8530;
#accordion-1 dt.active.hovercolor:#fff
#accordion-1 ddpadding:25px;background:url(../images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px
#accordion-1 .slide-numbercolor:#68889b;left:10px;font-weight:bold
#accordion-1 .active .slide-numbercolor:#fff;
#accordion-1 acolor:#BF8530
#accordion-1 dd imgfloat:right;margin:0 0 0 30px;
#accordion-1 h2font-size:2.5em;margin-top:10px
#accordion-1 .morepadding-top:10px;display:block

【问题讨论】：

也许您可以在问题中发布您的 CSS 和 HTML 的相关部分。 【参考方案1】：

您可能希望将position:relative; 添加到下拉的部分。根据this，它通常会解决您的问题。

【讨论】：

你可能还想看看这个：***.com/questions/1287439/ie7-z-index-problem 添加位置：相对于手风琴 div 似乎可以解决问题。【参考方案2】：

IE 7 中的 z-index 存在一个已知问题。它对绝对定位元素的 z-index 与相对定位元素的处理方式不同。就像您有两组 z 索引。如果您不能让所有元素都使用相同的定位，则可以使用具有相同定位的包装器来修复它。

z-index bug threads

Z-Index IE bug fix?

Internet Explorer z-index bug?

jQuery 解决方案：

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/