Question

我已经分离了IE7的z-index错误的一个小测试用例，但不知道如何修复它。我整天都在玩z-index。

IE7中z-index有什么问题？

测试CSS：

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

测试HTML：

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

Answer 1

Z-index不是绝对测量值。 z-index：1000的元素可能位于具有z-index的元素后面：1 - 只要各个元素属于不同的堆叠上下文。

当您指定z-index时，您将相对于同一堆叠上下文中的其他元素指定它，尽管CSS spec's paragraph on Z-index表示仅为定位内容创建新的堆叠上下文-index而不是auto （意味着你的整个文档应该是一个堆叠上下文），你做构建一个定位的跨度：不幸的是IE7解释了没有z-index的定位内容这作为一个新的堆叠上下文。

简而言之，请尝试添加此CSS：

#envelope-1 {position:relative; z-index:1;}

或重新设计文档，使您的跨度没有位置：相对更长：

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

有关此错误的类似示例，请参阅http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/。给出父元素（在你的例子中为envelope-1）更高的z-index工作的原因是因为那时envelope-1的所有子节点（包括菜单）将与envelope-1的所有兄弟节点（特别是envelope-2）重叠。

虽然z-index允许您明确定义事物的重叠方式，even without z-index the layering order is well defined。最后，IE6还有一个额外的错误，导致selectboxes和iframe浮动在其他所有内容之上。

Answer 2

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

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

Answer 3

在IE中，定位元素生成一个新的堆叠上下文，开始 z-index值为0.因此z-index无法正常工作。

尝试给父元素一个更高的z-index值（甚至可以高于孩子的z-index值本身）来修复bug。

Answer 4

我遇到了这个问题，但是在一个大型项目中，必须要求HTML更改并成为一个完整的问题，所以我一直在寻找纯css解决方案。

通过将position:relative; z-index:-1放在我的主体内容上，我的标题下拉内容突然显示在ie7中的正文内容上方（它已经在所有其他浏览器和ie8 +中显示没有问题）

然后这个问题被禁用所有悬停和点击对z-index:-1元素中所有内容的操作，所以我去了整个页面的父元素并给它一个position:relative; z-index:1 < / p>

修复了问题并保留了正确的分层功能。

感觉有点hacky，但按要求工作。

Answer 5

我发现我必须在ie7特定样式表中对div进行特殊的z-index指定：

div {z-index：10; }

对于不相关的div（例如nav）的z-index，显示在滑块上方。我不能简单地将一个z-index添加到滑块div本身。

Answer 6

如果前面提到的父节点中更高的z-indexing不适合您的需求，您可以创建替代解决方案，并通过IE条件注释或使用Modernizr提供的（更理想主义）特征检测将其定位到有问题的浏览器。

Modernizr的快速（并且明显有效）测试：

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

Answer 7

它似乎不是一个bug，只是为了对css标准的不同理解。如果外部容器未指定z-index，但内部元素指定了更高的z-index。所以容器的兄弟可能覆盖了高z-index元素。即使这样，它只发生在IE7中，但IE6，IE8和Firefox都可以。

Answer 8

在IE6中，某些UI元素通过本机控件实现。这些控件是在一个完全独立的阶段（窗口？）中呈现的，并且始终显示在任何其他控件之上，而不管z-index。选择框是另一个有问题的控制。

解决此问题的唯一方法是构建IE呈现为单独“窗口”的内容 - 即您可以将选择框放在文本框上，或者更有用的是iframe。

简而言之，您需要像iframe中的菜单一样将“悬停”放在iframe中，以便让IE将这些放在内置的UI控件之上。

这应该在IE7中修复（参见http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx），但是你可能正在以某种兼容模式运行？

Answer 9

这个错误似乎是一个单独的问题，而不是标准的单独堆叠上下文IE错误。我有一个类似的问题，多个堆叠输入（基本上是每行中有一个自动完成器的表）。我发现的唯一解决方案是给每个细胞一个递减的z指数值。

Answer 10

如果你想创建下拉菜单并且z-index有问题，可以通过创建相同值的z-index来解决它（z-index：999;例如）。只需将z-index放在父级和孩子div，这将解决问题。我解决了这个问题。如果我把不同的z索引，肯定，它会显示我的孩子div超过我的父div，但是，一旦我想将鼠标从菜单选项卡移动到子菜单div（下拉列表），它就消失了...然后我把相同值的z指数解决了问题。

Answer 11

我通过使用IE7的开发人员工具（它的工具栏）并在div的容器中添加负z-index来解决它，该容器将低于另一个div。

IE7 Z-Index分层问题

11 个答案: