IE7 Z-Index 分层问题答案

【问题标题】：IE7 Z-Index Layering IssuesIE7 Z-Index 分层问题
【发布时间】：2009-08-17 11:26:42
【问题描述】：

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

z-index 在 IE7 中有什么问题？

测试 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>

【问题讨论】：

如果您正在寻找一种解决方法，并且您没有重新排列所有 html 以很好地位于某些堆栈上下文中，请尝试以下操作：brenelz.com/blog/squish-the-internet-explorer-z-index-bug

标签： css internet-explorer-7 z-index

【解决方案1】：

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

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

简而言之，尝试添加这个 CSS：

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

或重新设计文档，使您的 span 不再具有 position:relative：

<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/。为父元素（在您的示例中为信封 1）提供更高 z-index 的原因是因为信封 1 的所有子元素（包括菜单）将与信封 1 的所有兄弟姐妹（特别是信封 2）重叠。

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

【讨论】：

终于解决了:) - 相对位置真的很烦人，所以我以某种方式采用了你的想法，没有“信封”元素 - 它似乎解决了问题并且也可以工作 - 只需要重新设计一点建议框的代码 - 非常感谢
影响元素相互重叠方式的三个不同因素：堆叠上下文、源顺序和绘制顺序。 处理stacking contexts 时会出现最明显的问题- 了解其他两个将帮助您找出更深奥的陷阱。 来源：CSS-Discuss Wiki。
将 z-index 添加到父元素是一个绝妙的解决方案
我爱你。向我的父母添加了 position:relative 和 z-index:500 并修复了它！
我用演示解决方案的 cmets 解决了这个问题。 jsfiddle.net/fNcGu/3

【解决方案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;
});
});

【讨论】：

在阅读了上面的“正确”解决方案之后，我尝试为我的问题制定一个解决方案，该解决方案比问题中的琐碎问题要复杂得多。然后我把这个答案扔进去，它就像一个魅力。如果上述解决方案是正确的，那么这当然是简单的解决方案。谢谢！

【解决方案3】：

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

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

【讨论】：

谢谢。该解决方案通过提供父容器的 z-index 对我有用，不一定高于子容器的 z-index。

【解决方案4】：

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

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

问题在于这禁用了带有z-index:-1的元素中所有内容的所有悬停和单击操作，所以我转到整个页面的父元素并给它一个position:relative; z-index:1

解决了问题并保留了正确的分层功能。

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

【讨论】：

【解决方案5】：

我发现我必须在 ie7 特定样式表中的 div 上放置一个特殊的 z-index 名称：

div { z-index:10; }

用于不相关 div 的 z-index，例如导航，显示在滑块上方。我不能简单地将 z-index 添加到滑块 div 本身。

【讨论】：

我发现除了html {z-index:1; position:relative;}之外，它还允许菜单越过IE上的轮播图像。

【解决方案6】：

如果前面提到的父节点中更高的 z-indexing 不能满足您的需求，您可以创建替代解决方案，并通过 IE 条件 cmets 或使用 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;
});

【讨论】：

非常好！特征检测绝对是要走的路。

【解决方案7】：

看起来不是ie bug，只是对css标准的不同理解。如果外部容器未指定 z-index，但内部元素指定了更高的 z-index。所以容器的兄弟可能会覆盖高 z-index 元素。就算这样，也只出现在IE7，IE6、IE8、Firefox都可以。

【讨论】：

【解决方案8】：

在一般情况下，在 IE6 中，某些 UI 元素是使用本机控件实现的。这些控件在完全独立的阶段（窗口？）呈现，并且始终出现在任何其他控件之上，而与 z-index 无关。选择框是另一个这样有问题的控件。

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

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

这应该在 IE7 中得到修复（请参阅http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx），但也许您是在某种兼容模式下运行的？

【讨论】：

我知道 IE6 z-index 错误 - 这已修复 - 但 IE7 中相对/绝对位置元素/输入还有另一个问题（在 IE8 中已修复） - 我找到了几个解决方案（玩 z-indeces），但他们都没有工作 - 这就是我在那里问的原因......无论如何，谢谢你的答案。

【解决方案9】：

这个错误似乎是一个独立的问题，而不是标准的独立堆栈上下文 IE 错误。我有多个堆叠输入的类似问题（基本上是每行都有一个自动完成器的表）。我找到的唯一解决方案是给每个单元格一个递减的 z-index 值。

【讨论】：

【解决方案10】：

如果您想创建下拉菜单并遇到 z-index 问题，您可以通过创建相同值的 z-index（例如 z-index:999；）来解决它。只需将 z-index 放在父级中并子div，这将解决问题。我解决了这个问题。如果我放置不同的 z-index，当然，它会在我的父 div 上显示我的子 div，但是，一旦我想将鼠标从菜单选项卡移动到子菜单 div（下拉列表），它就会消失......然后我把相同值的 z-indexes 并解决了问题..

【讨论】：

【解决方案11】：

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

【讨论】：