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>