怪癖模式下的 IE7 CSS Z-Index 问题答案

【问题标题】：IE7 CSS Z-Index issue in quirks mode怪癖模式下的 IE7 CSS Z-Index 问题
【发布时间】：2011-03-27 21:23:39
【问题描述】：

我已经尝试了一天多的时间来解决这个问题，因此我们将不胜感激。我有一个由 ul/li 组成的 Suckerfish 菜单。我正在尝试在我的菜单中添加一些自上而下的滚动指示器。在我的示例中，我有一个蓝色和绿色指示器，它们现在只是放在菜单中。这些指标只是 UL 内部的另一个 LI，但风格不同。我已经将它们绝对定位在一个固定的顶部。如果您使用 firefox 查看示例并将鼠标悬停在 Blah Reports 上，您会看到显示了 2 个指标。

http://inthemind.com/test/test.html

如果您在 IE7 中打开它并将鼠标悬停在 Blah Reports 上，它们不会出现。但是，如果您在子菜单展开时将鼠标悬停在其中一个子项（即合规性）上，则指示器确实变得可见。一旦子菜单展开，我无法弄清楚使指标出现的变化。

如果有人能给我一个提示或提示，让我知道它在 IE 中运行时缺少什么，我将不胜感激。

谢谢，劳尔

p.s) 我必须使用怪癖模式

更新因此，我将其范围缩小到 IE 不会解析绝对定位元素的事实，因为 ul 是隐藏的，当 ul 变得可见时，IE 不会返回并重新计算位置。如果我等到 ul 可见，那么我会- 将类分配给指示器以重置元素的位置，这似乎使它们显示出来。这并不理想，因为现在我的指标不会随着菜单淡入，而是在事后显示。

还有其他提示吗？

【问题讨论】：

您确定必须使用 quirksmode 吗？为什么不能切换？
这在 FireFox 中可以完美运行吗？我通常做的是让它在现代浏览器中正常运行，然后通过 hacks/bug-fixes 回溯以使其在 IE 中运行。
我需要 quirks 模式，因为我们使用的是 Reporting Services 2005，它与标准模式和 Height=100% 不兼容
是的，它在 Firefox 中按预期工作。 IE7 是痛苦的。

标签： html css internet-explorer z-index quirks-mode

【解决方案1】：

看看this 不久前它对我有用。虽然不是 100% 确定它是否是您正在寻找的，但可能对某人有用

【讨论】：

不适用。在他的情况下，他有 2 个堆叠上下文。在我的情况下，我的 UL 上有一个堆叠上下文，所有 LI 都是其中的一部分。

【解决方案2】：

需要记住的几件事：

您所有的 z 索引元素都应该是 position: relative 或 position: absolute 否则 IE 6 和 7 将无法正确处理它们。

此外，IE 6 和 7 将 z-index 与它的兄弟元素相关，而不是所有元素。例如 =>

<div style="z-index: 2;">
  <div id="d1" style="z-index: 1000"></div>
</div>
<div style="z-index: 1;">
  <div id="d2" style="z-index: 2000"></div>
</div>

在本例中，#d1 将显示为 #d2。

您还可以调整 DOM 中同级元素的顺序以获得所需的 z 顺序。

如果您使用的是 jQuery，这里有一个潜在的快速修复方法 =>
http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery

【讨论】：

【解决方案3】：

好吧，我为你们中感兴趣的人想出来了。在 IE 中最终发生的情况是，如果父元素从 display: none 更改为 display: block 绝对定位的子元素永远不会在布局引擎中得到处理，因此它们永远不会设置初始偏移量。

所以你需要做的是设置父显示：块，重置指示器 LI 上的类以便布局引擎启动，然后你必须通过调用 offsetTop 强制布局引擎布局所有内容。一旦元素被定位，我们就可以将父元素设置回显示：无。

强制布局引擎刷新的原因是 IE 将合并所有样式更改，直到 javascript 完成，这意味着永远不会重新计算偏移量。

这是解决问题的代码：

if ($.browser.msie && $.browser.version <= 7) {
    var il = $ul.data('indicatorLayedOut');
    if (il == null) { // We only have to do the layout once
        var $ind = $ul.find('>.indicator');
        $ul.css('visibility', 'hidden').css('display', 'block');

        // Force IE to re-style the indicators. If we omit this then the layout engine
        // will not update the position and cause the indicators to not show up
        $ind.addClass("indicator");

        // We then have to iterate through
        // and pull the offset so we can
        // force a dom update
        $ind.each(function() {
            var oy = this.offsetTop, ox = this.offsetLeft;
            //console.log("X: " + ox + ", Y: " + oy);
        });
        $ul.css('display', 'none').css('visibility', 'visible');

        $ul.data('indicatorLayedOut', true);
    }
}

【讨论】：