IE7的z-index bug，复杂案例答案

【问题标题】：IE7's z-index bug, a complex caseIE7的z-index bug，复杂案例
【发布时间】：2011-08-07 06:29:33
【问题描述】：

我有一个带有表单域和动态工具提示的弹出窗口。在每个浏览器中，提示都显示得很好，但在 IE6/7 中，它们显示在表单字段下方。经典错误，但我找不到有效的解决方案。

Here's a screenshot，顶部是 Firefox 5，底部是 IE7。

不用过多钻研代码，表单有如下嵌套结构：

div.pp (position: absolute; z-index: 200)
  -> div#le, div#ri
    -> label (position: relative)
      -> span.tip (position: absolute; z-index: 300)

请注意，span.tip 是动态生成并注入到标签中的，使它们与输入同级。

编辑：Here is a demo。

【问题讨论】：

【解决方案1】：

一般来说，在 IE

在你的情况下，我会尝试给相对定位的span 一个 z-index。但是如果没有整个 HTML 上下文，就很难分辨。

编辑：查看演示后，我会尝试为左侧相对定位的标签提供比右侧更高的z-index：

.pp .le label{z-index: 10}
.pp .ri label{z-index: 5}

【讨论】：

【解决方案2】：

问题是 IE 为相对定位元素的子元素重新创建 z-index，因此无法为不同的工具提示相对于彼此设置 z-index。

解决方案在于简化 IE 页面。我取消了标签上的相对定位，相对于 div.pp 绝对定位工具提示，并使用 javascript 正确定位匿名工具提示并动态设置 z-indexes。当提示的 z 索引低于其父级 (div.pp) 的 z 索引时，提示正确显示。

【讨论】：