IE7 Z索引分层问题

163

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

z-indexIE7有什么问题？

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

css internet-explorer-7 z-index

— 雷兹纳
source

如果您正在寻找解决方法，并且没有重新排列所有html使其恰好

— Nasaralla

268

Z索引不是绝对度量。只要z-index：1000的元素位于不同的堆叠上下文中，则z-index：1000的元素可能位于其后。

当您指定z-index时，您是相对于同一堆叠上下文中的其他元素指定它的，尽管CSS规范在Z-index上的段落指出，仅为具有z-index而不是z-index的定位内容创建新的堆叠上下文自动（意味着您的整个文档应该是单个堆叠上下文），您确实构造了一个定位范围：不幸的是，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的原因是，因为那时信封1的所有子元素（包括菜单）都将与信封1的所有兄弟姐妹（特别是信封2）重叠。

尽管使用z-index可以显式定义事物的重叠方式，即使没有z-index，也可以很好地定义分层顺序。最后，IE6还有一个额外的错误，该错误导致选择框和iframe浮动在其他所有内容之上。

— 伊蒙·纳邦（Eamon Nerbonne）
source

4

终于解决了:)-相对位置确实很麻烦，所以我以某种方式采用了您的想法而没有“信封”元素-似乎可以解决问题并且也可以工作-只需重新设计一些建议框的代码-很多

— rezna

6

影响元素相互重叠的方式有三点不同：堆栈上下文，源顺序和绘画顺序。在处理堆栈上下文时会出现最明显的问题-知道另外两个会帮助您找出更深奥的陷阱。资料来源：CSS-Discuss Wiki。

— rjb

2

将z-index添加到父元素是一个

— 不错的

2

我爱你。向我的父母添加了position：relative和z-index：500并修复了它！

— Aymeric Gaurat-Apelli

2

我通过演示解决方案的注释来解决这个问题。jsfiddle.net/fNcGu/3

— Christopher Johnson

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

— 尼西斯
source

在阅读了上面的“正确”解决方案之后，我试图为我的复杂问题（比该问题中的琐碎问题）制定一个解决方案。然后我回答了这个问题，它就像一个魅力。如果上述解决方案是正确的，那肯定是简单的方法。谢谢！

— 兰登

11

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

尝试给父元素更高的z-index值（甚至可以高于子元素的z-index值本身）来修复该错误。

— ed1nh0
source

1

谢谢。该解决方案为我提供了父容器的z索引，但不一定高于孩子的z索引。

— neelmeg 2013年

4

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

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

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

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

感觉有点骇人听闻，但可以按要求工作。

— lukeroxout
source

3

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

div {z-index：10; }

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

— eBar解决方案
source

我发现，这除了html {z-index:1; position:relative;}允许菜单遍历IE上的轮播图片外。

— bassplayer7

2

如果以前提到的父节点中更高的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;
});

— 球状
source

非常好！特征检测绝对是必经之路。

— 杰森

1

它看起来像不是一个bug，只是出于对CSS标准的不同理解。如果未指定外部容器的z-index，但是内部元素指定了较高的z-index。因此，容器的同级可能会覆盖高z-index元素。即使那样，它也只会在IE7中出现，但IE6，IE8和Firefox都可以。

— c2j
source

0

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

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

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

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

— 伊蒙·纳邦（Eamon Nerbonne）
source

我知道IE6的z-index错误-这是固定的-但是IE7中相对/绝对位置元素/输入还有另一个问题（在IE8中是固定的）-我发现了几种解决方案（使用z-indeces），但是他们都没有工作-这就是为什么我要在那里...无论如何，答案都是如此。

— rezna

0

与标准的单独堆栈上下文IE错误相比，该错误似乎是一个单独的问题。我有多个堆叠输入（基本上是一个在每行中都有一个自动完成程序的表）的类似问题。我发现的唯一解决方案是为每个单元格减小z索引值。

— 杰里米·考夫曼
source

0

如果您想创建下拉菜单并遇到z-index问题，则可以通过创建相同值的z-index（例如z-index：999；）来解决该问题。只需将z-index放在父级和子级div中，那会解决问题。我解决了这个问题。如果我放不同的z索引，可以肯定，它将在父div上显示我的孩子div，但是，一旦我想将鼠标从菜单选项卡移到子菜单div（下拉列表），它将消失……然后我把Z索引的值相同，并解决了问题。

— 马可
source

0

我通过使用IE7的开发人员工具（带有工具栏）并为该div的容器添加了一个负Z索引来解决该问题，该索引将低于另一个div。

— 卢卡斯
source