IE7 Z索引分层问题

我已经隔离了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> 

Z指数不是一个绝对的测量。 只要各个元素属于不同的堆栈上下文 ,z-index:1000的元素可能位于具有z-index:1的元素之后。

当您指定z-index时,您将指定它相对于同一个堆叠上下文中的其他元素,尽管CSS规范的Z-index段落表示仅为具有z-index的定位内容创建新的堆叠上下文auto (意味着你的整个文档应该是一个单一的堆栈上下文),你确实构建了一个定位跨度:不幸的是,IE7将定位的内容解释为一个新的堆栈上下文。

总之,尝试添加这个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工作的原因是因为那么envelope-1(包括菜单)的所有孩子将覆盖所有的envelope-1(特别是envelope-2)的兄弟。

尽管z-index可以让你明确地定义重叠的方式, 即使没有z-index,分层顺序也是明确的 。 最后,IE6有一个额外的错误,导致选择框和iframe漂浮在一切之上。

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值本身更高)来修复该错误。

我遇到了这个问题,但是在一个需要修改HTML的大型项目中,这个问题变成了一个问题,所以我正在寻找一个纯粹的css解决方案。

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

这个问题是当时禁用所有的悬停和点击元素中的所有内容与z-index:-1所以我去了整个页面的父元素,并给它一个position:relative; z-index:1 position:relative; z-index:1

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

感觉有点哈克,但按要求工作。

我发现我必须在ie7特定的Styelsheet上放置一个特殊的z-index指定:

div {z-index:10; }

对于无关div的z-index(如nav),要显示在滑块上方。 我不能简单地添加一个z-index到滑块div本身。

如果前面提到的父节点中较高的Z索引不符合您的需求,您可以创建替代解决方案,并通过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; }); 

它看起来不像一个错误,只是为了不同的CSS标准的理解。 如果外部容器没有指定z-index,但是内部元素指定了更高的z-index。 所以容器的兄弟可能覆盖高Z指数元素。 即使这样,它只发生在IE7,但IE6,IE8和Firefox是好的。

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

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

总之,为了让IE放置在上面的内置UI控件上,你需要在菜单的iframe中放置“on-hover”。

这应该已经在IE7中修复(请参阅http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ),但也许你运行在某种兼容模式?

这个错误似乎是一个单独的问题,而不是标准的单独的堆栈上下文IE错误。 我有一个类似的问题与多个堆叠输入(本质上是一个表中每行自动完成)。 我找到的唯一解决方案是给每个细胞减少z-索引值。

如果你想创建下拉菜单,并有z-index的问题,你可以通过创建z-index相同的值(例如z-index:999)来解决它。只要把z-index放在父子div和这将解决问题。 我解决了这个问题。 如果我把不同的z索引,当然,它会显示我的孩子div在我的父div,但是,一旦我想从菜单选项卡移动到子菜单的div(下拉列表),它消失…然后我把z – 索引相同的价值,并解决问题..

我解决了它通过使用IE7(其工具栏)的开发人员工具,并添加一个负的z索引到div的容器,将低于其他股利。