IE7的Z-Index层叠问题

Question

IE7的Z-Index层叠问题

163

我已经找到了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>

- rezna

如果您正在寻找一种解决方法，并且不想重新排列所有HTML以使其在某些堆栈上下文中，请尝试此方法：http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ - Nasaralla

11个回答

15

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

- nixis

在阅读上面的“正确”解决方案之后，我尝试为我的问题制定一个解决方案，这个问题比问题中的微不足道的问题要复杂得多。然后我将此答案投入使用，它完美地解决了我的问题。如果上面的解决方案是正确的，那么这肯定是更简单的解决方案。谢谢！ - Landon

11

在IE浏览器中，定位元素将生成一个新的层叠上下文，其z-index值为0。因此，z-index无法正确工作。

尝试为父元素设置更高的z-index值（甚至可以比子元素的z-index值本身还要高）以修复该bug。

- ed1nh0

1

谢谢。这个解决方案对我有用，它给了父容器一个z-index，不一定比子元素的z-index高。 - neelmeg

4

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

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

问题是这会禁用具有z-index：-1元素中所有内容的悬停和单击操作，因此我转而去寻找整个页面的父元素，并给它一个position:relative; z-index:1 这解决了问题并保留了正确的分层功能。

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

- lukeroxout

3

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

为了使无关的div，例如导航，显示在幻灯片之上。我不能简单地向幻灯片div本身添加z-index。

- eBar Solutions

我发现除了 html {z-index:1; position:relative;} 之外，还可以让菜单在IE上覆盖轮播图像。 - bassplayer7

2

如果父节点中先前提到的更高的z-index不符合您的需求，您可以创建另一种解决方案，并通过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;
});

- spheroid

非常好！特征检测绝对是正确的方法。 - Jason

1

看起来不是IE的bug，只是对CSS标准有不同的理解。如果外部容器没有指定z-index，但内部元素指定了更高的z-index，则容器的兄弟元素可能会覆盖高z-index元素。即使是这样，在IE7中才会出现这种情况，但IE6、IE8和Firefox都没问题。

- c2j

0

这个 bug 似乎与标准的 IE 分离堆叠上下文 bug 有些不同。我曾经遇到过类似的问题，即多个堆叠输入框（本质上是每行一个带自动完成功能的表格）。我找到的唯一解决方案是给每个单元格分配递减的 z-index 值。

- Jeremy Kauffman

0

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

- Marko

0

我通过使用IE7的开发者工具（它是一个工具栏），并向包含会位于另一div下方的div的容器添加负z-index来解决了这个问题。

- Lucas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eamon Nerbonne · Accepted Answer

z-index不是绝对的度量。只要相应的元素属于不同的堆叠上下文，具有z-index: 1000的元素可能在具有z-index: 1的元素后面。

当您指定z-index时，您是相对于同一堆叠上下文中的其他元素进行指定的，尽管CSS规范中关于Z-index的段落说仅为定位内容与z-index不为auto的（这意味着您的整个文档应该是一个单独的堆叠上下文），但您确实构建了一个定位的span：不幸的是，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/以了解此错误的类似示例。在您的示例中，将父元素（envelope-1）赋予更高的z-index的原因是因为envelope-1的所有子项（包括菜单）将重叠在envelope-1的所有同级项（特别是envelope-2）之上。

尽管z-index允许您明确定义重叠方式，但即使没有z-index，分层顺序也已经定义好了。最后，IE6还有一个额外的错误，会导致选择框和iframe浮动在其他所有内容的顶部。