IE7Z-索引分层问题

我已经隔离了 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>
176276 次浏览
小开

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

解决这个问题的唯一方法是构建 IE 呈现为独立“窗口”的内容——也就是说，你可以在文本框上放置一个选择框，或者更有用的是，一个 iframe。

简而言之，你需要在 iframe 中放置“悬停”功能，比如菜单，这样 IE 就可以把这些内置的 UI 控件放在 iframe 中。

这个问题在 IE7中应该已经解决了(参见 http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx) ，但是也许您正在某种兼容模式下运行？

小开
最佳答案

Z- 指数不是一个绝对的度量。 Z-index: 1000的元素可能位于 z-index: 1的元素后面-只要相应的元素属于不同的 叠加上下文。

当你指定 z-index 时，你指定它相对于同一堆栈上下文中的其他元素，虽然 CSS 规范中关于 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/。给父元素(在您的示例中是信封 -1)一个较高的 z 索引的原因是因为这样信封 -1的所有子元素(包括菜单)将重叠信封 -1的所有兄弟元素(特别是信封 -2)。

尽管 z-index 允许您显式地定义事物的重叠方式，但是 即使没有 z 索引，分层顺序也是明确的。最后，IE6还有一个额外的 bug，它会导致 selectbox 和 iframe 浮动在其他所有东西之上。

小开

与标准的独立堆栈上下文 IE bug 相比，这个 bug 似乎是一个单独的问题。我在处理多个堆叠的输入时遇到了类似的问题(本质上是一个每行都有一个自动补全程序的表)。我找到的唯一解决方案是给每个单元格一个递减的 z 索引值。

小开

我发现我必须在 ie7特定的样式表中为 div 设置一个特殊的 z 索引名称:

Div { z-index: 10; }

对于不相关的 div (如导航)的 z 索引，在滑块上方显示。我不能简单地向滑块 div 本身添加 z 索引。

小开

它看起来不像一个 ie bug，只是对 css 标准有不同的理解。如果未指定外部容器的 z-index，而内部元素指定了较高的 z-index。所以容器的兄弟可能覆盖了高 z 指数的元素。即使这样，它只发生在 IE7，但 IE6，IE8和火狐是确定的。

小开

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-index 值为0。因此 z-index 不能正常工作。

尝试为父元素提供一个更高的 z-index 值(甚至可以高于子元素的 z-index 值本身)来修复 bug。

小开

如果前面提到的父节点中较高的 z 索引不适合你的需要，你可以创建替代解决方案，并通过 IE 条件注释或使用现代化提供的(更理想的)特征提取针对有问题的浏览器。

现代化的快速测试(显然是可行的) :

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

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

通过在主体内容上放置 position:relative; z-index:-1，我的头部下拉内容突然显示在 ie7的主体内容上方(它已经在所有其他浏览器和 ie8 + 中毫无问题地显示了)

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

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

感觉有点粗糙，但是按要求工作。

小开

如果您想创建下拉菜单并且遇到 z-index 的问题，可以通过创建相同值的 z-index 来解决(例如 z-index: 999)。.只要把 z-index 放到父和子 div 中就可以解决问题了。我用这个解决问题。如果我放置不同的 z 索引，当然，它会显示我的子 div 在我的父 div，但是，一旦我想把我的鼠标从菜单标签移动到子菜单 div (下拉列表) ，它消失了... 然后我放置相同值的 z 索引和解决问题。.

小开

我解决这个问题的方法是使用 IE7的开发工具(它是一个工具栏) ，并在 div 的容器中添加一个负 z 索引，它将低于另一个 div。


提交答案