Html 怪癖模式下的IE7 CSS Z索引问题

我已经想了一天多了，所以任何帮助都将不胜感激。 我有一份由ul/li组成的烂鱼菜单。我正在尝试将一些自上而下的滚动指示器添加到我的菜单中。在我的例子中，我有一个蓝色和绿色的指示灯，现在就放在菜单中。这些指标只是UL内部的另一个LI，但风格不同。我用一个固定的顶部来定位它们。 如果您使用firefox查看示例，并将鼠标悬停在Blah报告上，您可以看到两个指示器显示出来

如果你在IE7中打开它，将鼠标悬停在无聊的报告上，它们就不会出现。但是，如果您将鼠标悬停在其中一个子项上，即当该子菜单展开时，合规性，则指示器确实会变为可见。我搞不清是什么改变了，一旦子菜单展开，指示器就会显示出来

如果有人能给我一个提示或提示，让这个在IE中工作，我会非常感激

谢谢， 劳尔

p、 我必须使用怪癖模式

更新 所以我把它缩小到这样一个事实：IE不会解析绝对定位元素，因为ul是隐藏的，IE不会在ul可见时返回并重新计算位置。如果我等到ul可见，我会将类重新分配给指示器，以重置元素上的定位，这似乎会使它们显示出来向上的 这并不理想，因为现在我的指示灯不会随着菜单淡入，而是在事实发生后出现

---

还有其他建议吗？

看一看，这在不久前对我很有效。虽然不能100%确定这是否是你所寻找的，但可能对某些人有用。

看一看，前一阵子它对我有用。尽管不能100%确定这是否是你所寻找的，但可能对某些人有用

要记住以下几点：

所有z索引元素都应该是位置：相对或位置：绝对，否则IE 6和7将无法正确处理它们

此外，IE6和IE7处理相对于其兄弟元素的z索引，而不是所有元素。ex=>

<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，这里有一个潜在的快速修复=>

---

要记住几件事：

所有z索引元素都应该是位置：相对或位置：绝对，否则IE 6和7将无法正确处理它们

此外，IE6和IE7处理相对于其兄弟元素的z索引，而不是所有元素。ex=>

<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，这里有一个潜在的快速修复=>

---

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

所以你要做的是将父级设置为display:block，重置指示器LI上的类，这样布局引擎就会启动，然后你必须通过调用offsetTop来强制布局引擎布局所有内容。元素定位后，我们可以将父元素设置回display:none

强制布局引擎刷新的原因是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);
    }
}

---

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

所以你要做的是将父级设置为display:block，重置指示器LI上的类，这样布局引擎就会启动，然后你必须通过调用offsetTop来强制布局引擎布局所有内容。元素定位后，我们可以将父元素设置回display:none

强制布局引擎刷新的原因是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);
    }
}

---

您确定必须使用quirksmode吗？为什么你不能切换？这在FireFox中运行得很好吗？我通常做的是让它在现代浏览器中正常工作，然后通过黑客/bug修复程序回溯，使其在IE中正常工作。我需要怪癖模式，因为我们使用的是Reporting Services 2005，它在标准模式下表现不好，高度=100%是的，它在Firefox中工作正常。IE7是最痛苦的。你确定你必须使用quirksmode吗？为什么你不能切换？这在FireFox中运行得很好吗？我通常做的就是把它弄到手

---

在现代浏览器中正常工作，然后使用黑客/错误修复回溯，使其在IE中工作。我需要怪癖模式，因为我们使用的是Reporting Services 2005，它不能很好地使用标准模式，高度=100%是的，它在Firefox中工作正常。IE7是最痛苦的，它不适用。在他的例子中，他有两个堆叠上下文。在我的例子中，我的UL上有一个堆叠上下文，所有的LI都是其中的一部分。它不适用。在他的例子中，他有两个堆叠上下文。在我的例子中，我的UL上有一个堆叠上下文，所有的LI都是其中的一部分。