题

我已经隔离了一个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>
有帮助吗？

解决方案

z索引不是绝对测量。 具有z索引的元素可能有可能在具有z索引的元素后面：1 - 只要各个元素属于不同 堆叠上下文.

当您指定z索引时，您在同一堆叠上下文中相对于其他元素指定它，尽管 CSS规格在z索引上的段落 说仅为定位内容创建新的堆叠上下文 与自动之外的z指数 （这意味着您的整个文档应该是单个堆叠的上下文），您 做过 构建定位跨度：不幸的是，IE7解释了无需z索引的定位内容，这是新的堆叠上下文。

简而言之，尝试添加此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/ 对于此错误的类似示例。给出父元素（示例中的信封-1）的原因是较高的z索引工作是因为那时所有信封1的孩子（包括菜单）都会重叠信封-1的所有兄弟姐妹（特别是信封2）。

尽管z索引让您明确定义事物的重叠方式，但 即使没有z索引，分层顺序也是很好的定义. 。最后，IE6有一个其他错误，会导致Selectbox和IFRAMES浮动在其他所有内容上。

其他提示

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;
});
});

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

尝试给父元素一个更高的z指数值（甚至可以高于孩子的z索引值本身）来修复错误。

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

放置 position:relative; z-index:-1 在我的主体内容上，我的标题下拉内容突然显示在IE7中的身体内容上方（在所有其他浏览器和IE8+中，它已经在没有问题的情况下显示）

然后，问题是，这是禁用所有悬停的，并单击元素中所有内容的操作 z-index:-1 所以我去了整页的父元素，并给了它 position:relative; z-index:1

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

感觉有点骇客，但根据需要工作。

我发现我必须在IE7特定的Styelsheet中的DIV上放置一个特殊的Z索引名称：

div {z-index：10; }

对于无关div的z指数，例如导航，以显示滑块上方。我不能简单地在滑块div中添加z索引。

如果前面提到的父节点中提到的较高的z指数不适合您的需求，则可以创建替代解决方案并将其定位为有条件的评论或使用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;
});

看起来不是IE错误，只是为了理解CSS标准。如果未指定外部容器，则内部元素指定了更高的z索引。因此，容器的兄弟姐妹可能会覆盖高Z索引元素。即使这样，它也仅在IE7中出现，但是IE6，IE8和Firefox还可以。

通常，在IE6中，某些UI元素是通过天然控件实现的。这些控件在一个完全独立的阶段（窗口？）中渲染，并且无论z索引如何，始终出现在其他控件之上。 Select-Box是另一个问题的控制。

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

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

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

与标准单独的堆叠上下文IE错误相比，此错误似乎是一个单独的问题。我遇到了类似的问题，其中有多个堆叠输入（本质上是每行带有AutoCompleter的表）。我发现的唯一解决方案是使每个单元降低z指数值。

如果您想创建下拉菜单并在z索引方面遇到问题，则可以通过创建相同值的z索引来解决它（z index：999;例如）。那将解决问题。我解决了问题。如果我放置了不同的z索引，当然，它将显示我的孩子div在我的父div上，但是，一旦我想将鼠标从菜单选项卡移到sub-menu div（下拉列表），它就会消失...然后我将相同价值的Z索引解决并解决问题。

我通过使用IE7（其工具栏）的开发人员工具来解决它，并在DIV容器中添加负Z Index，而Div的容器将低于另一个Div。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top