Question

我已经创建了一个带有下拉菜单的顶级菜单，但下拉菜单并没有在IE中显示出来。 Chrome，FF和Safari效果很好。

我的代码如下所示：

<li id="search"><a href="#search" class="drop" >Search</a>
    <div class="drop2columns dropcontent">
        <div class="col_2">
            <ul>
                <li id="search_basic"><a href="#test1">Test1</a></li>
                <li id="search_advanced"><a href="#test2">Test2</a></li>
            </ul>   
        </div>
    </div>
</li>

css文件如下所示：

#menu .drop2columns {width: 130px;}

#menu .col_2 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    z-index: 9999;
}

#menu .col_2 {width:130px;}

我错过了什么？就像我说的那样只发生在IE（版本7,8和9）

上

Answer 1

z-index在Internet Explorer中无法正常工作：定位元素会创建一个新的堆叠上下文，从z-index 0开始。要解决此问题，您可以定位父元素（例如position: relative），并将其z-index设置为高于子元素的值。

Answer 2

z-index和IE总是一场噩梦。

有几种解决方法，请参阅 http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ 其中一个。

为什么z-index在IE中不起作用？

2 个答案: