IE7 CSS Z-古怪模式下的索引发布

Question

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

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

如果你在IE7中打开它，并在Blah报告上盘旋，它们就不会出现。但是，当子菜单扩展时，如果您悬停在其中一个子项(即遵从性)上，则指示符将变得可见。我不知道什么是改变，使指标显示，一旦子菜单扩大。

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

谢谢，劳尔

我得用古怪的方式

更新，所以我已经缩小了范围，因为IE不会解析绝对定位的元素，因为ul是隐藏的，当ul变为visible.If时，IE不会返回并重新计算位置，我一直等到ul可见时，再重新分配类到指示器，以重置元素上的位置，这似乎会使它们显示出来。这并不理想，因为现在我的指标不会随着菜单而褪色，而是在事实发生后出现。

还有其他建议吗？

Answer 1

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

因此，您需要做的是将父程序设置为显示:块，重置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);
    }
}

Answer 2

看看这，它为我工作了一段时间。虽然不能百分之百肯定你想要的东西，但对某人可能有用。

Answer 3

有几件事要记住：

所有的z索引元素都应该是position: relative或position: absolute，否则IE6和7将不能正确地对待它们。

此外，IE6和7处理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，下面是一个潜在的快速修复=>

http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery