Question

在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＆lt; = 7的解决方案，因为当时只有一个.sbOptions被删除。这是否会出现问题？我们希望如此！

快走：http://jsfiddle.net/HRubx/

现在可以根据需要生成不规则堆叠上下文：

li:hover {
    position: relative;
}

Answer 2

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

你有没有尝试过ole zoom：auto in places？把它放进css。

此外，z-index和绝对似乎差不多......绝对将元素从文档流中拉出来，因此没有“真正的”z-index与另一个被拉出的不同。

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

Answer 3

查看this文章。

简而言之，它使用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>

IE7 z-index命令错误

4 个答案: