javascript - IE7 z-index 顺序错误

Question

检查这个jsFiddle。

在 IE7 中，上面 jsFiddle 中的代码显示(.sbOptions)下一个选择框元素下的下拉菜单(.sbHolder)。

.sbOptions有z-index: 100;但仍显示在 下.sbHolder。

这在除 IE7 之外的所有浏览器中都可以正常工作，知道如何解决这个问题吗？

Answer 1

IE7有一个错误：没有设置z-index，只要hasLayout设置为true，就会给定位的元素分配一个堆叠上下文。.sbHolder 的宽度和高度就是这样的 hasLayout 触发器。因此，第二个 .sbHolder 位于顶部。

IE7 将您的规则更改为：

.sbHolder {
    position: relative;
    width: 130px;
    height: 30px;
    display: block;
    margin-bottom: 20px;
    z-index: 0; /* ! */
}

这会破坏您增加 .sbOptions z-index 的计划，因为 .sbOptions 会被 .sbHolder 的不规则堆叠上下文捕获。

我有一个针对 IE <=7 的解决方案，因为当时只有一个 .sbOptions 被下拉。这算不算问题？希望如此！

试一试：http: //jsfiddle.net/HRubx/

如果需要，现在会生成不规则的堆叠上下文：

li:hover {
    position: relative;
}

Answer 2

我不得不继续在 IE7 中添加 Z-index 1 才能开始让 jsfiddle 工作。

您是否尝试过 ole zoom:auto 在某些地方？把它放到css中。

此外，z-index 和 absolute 似乎几乎不一致...... absolute 将元素从文档流中拉出，因此没有与被拉出的另一个元素不同的“真实”z-index。

也许尝试不同的定位方案..

Answer 3

看看这篇文章。

简而言之，它使用 jquery 通过更改其他元素来对 z-index 进行排序：

解决 IE7 的许多问题的一种方法是动态反转页面上元素的默认 z-index 堆叠顺序。这将确保您的 HTML 源代码中较高的元素在您的页面上也具有较高的 z-index 顺序，从而解决了大多数 IE 堆叠问题。

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

Answer 4

嘿兄弟，如果你不能改变你的标记，只需像上面一样在父 div 中添加 z-index ：

<div class="sbHolder" style="z-index:11">
    <a href="#" class="sbToggle"></a>
    <a href="#" class="sbSelector">1</a>

    <ul class="sbOptions">
         <li><a href="#1">1</a></li>
         <li><a href="#2">2</a></li>
         <li><a href="#3">3</a></li>
         <li><a href="#4">4</a></li>
    </ul>
</div>

<div class="sbHolder" style="z-index:10">
    <a href="#" class="sbToggle"></a>
    <a href="#" class="sbSelector">A</a>

    <ul class="sbOptions">
        <li><a href="#1">A</a></li>
        <li><a href="#2">B</a></li>
        <li><a href="#3">C</a></li>
        <li><a href="#4">D</a></li>
    </ul>
</div>