【问题标题】:Z-index issue in Internet ExplorerInternet Explorer 中的 Z 索引问题
【发布时间】:2012-06-02 01:55:53
【问题描述】:

我的页面中有“尴尬的展示”,但上面有一个下拉菜单。问题是陈列柜与菜单重叠,并不完全可见。

我可以纠正 z-index 的变化,但它只在我输入时才有效:

尴尬展示的负面索引

下拉菜单的正索引

因此,由于展示柜中有箭头可在滑块中导航,因此无法单击每个滑块。似乎它们(箭头)位于透明层后面,因为它们是可见的,但处于非活动状态。

我的代码:

菜单

    <div id="navmenucontainer">
<ul id="navmenu">
    <li class="main" onclick="javascript: Mostrar(this);" id="menitem1"><a href="#" class="item">Productores</a>
        <div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
         Some menu items
    </div>
    </li>
    </ul>
   </div>

幻灯片

<div id="showcase" class="showcase">
                            <div class="showcase-slide">
                                <div class="showcase-content">
                                    <div class="showcase-content-wrapper">
                                       <img src="images/1.jpg">
                                    </div>
                                </div>
                                <div class="showcase-caption">

                                </div>
                             </div>

CSS

#navmenucontainer {
    z-index:999999;
}

*/ul#navmenu div.sub{
    display: none;
    background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
    position: absolute;
    top:26;
    left:0;
    vertical-align:top;
    padding-top:0;
    padding-bottom: 22px;
    width:1240px;
    /*border-right:1px solid silver;*/
    border:1px solid silver;
    z-index:99999;
    zoom:1;
}

ul#navmenu li {
  margin: 0;
  /*border: 0 none;*/
  padding: 0;
  float:left; /*For Gecko*/
  display: inline;
  list-style: none;
  height: 20px;
}

ul#navmenu ul {
  margin: 0;
  padding: 0;
  float:left;
  width:100%;
}

.showcase
{
    position: relative;
    z-index:-1;
    margin: 0;
}

重叠发生在“.sub”div 和“.showcase”中。

【问题讨论】:

    标签: css slideshow overlap


    【解决方案1】:

    这是一个远景,但毕竟它是 IE ......它可能(几乎)正确或灾难......我遇到了同样的问题,每次都是不同的解决方案,具体取决于运气。 .(IE很烂,只是引用并同意早期的cmets)

    将此添加到您的 html 中

         <!--[if IE]>
    <style type="text/css">
    
    #navmenucontainer {
          z-index:3000;
    }
    
    ul#navmenu {
          z-index:2000;
    }
    
    ul#navmenu div.sub {
          z-index:1000;
    }
    
    .showcase {
          position: relative;
          z-index:0;
          margin: 0;
    }
            </style>
            <![endif]-->
    

    灵感来自http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

    【讨论】:

    • 使用此解决方案,滑块在 IE 7 中与菜单重叠
    • 我正在制作我所得到的图像
    • 尝试将 ´ */ul#navmenu div.sub{´ 中的位置替换为 relative,并添加相对于其他 navmenu 元素(ul.and li)的位置,为它们添加 z 索引也。这是对这个众所周知的错误的最常见修复。 “为正在下降的部分添加‘位置:相对’。”这是因为它必须是一个相对于其父级的值。IE 不知道该怎么做。 Z index 1000 = 0,除非位置是相对的。然后 zindex 1000 = 1000 比父级的多。
    • 它没有用。我不知道该怎么办,从上个月开始我就被困住了。太多了。
    猜你喜欢
    • 1970-01-01
    • 2011-03-22
    • 2011-11-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-11
    • 1970-01-01
    相关资源
    最近更新 更多