Question

我一直试图解决这个问题超过一天，所以任何帮助都会受到赞赏。我有一个由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可见，那么我 - 将类分配给指示器以重置它们似乎使它们出现的元素上的定位。这并不理想，因为现在我的指标不会随菜单淡入，但会在事后显示出来。

还有其他提示吗？

Answer 1

看看this它对我来说有一段时间了。虽然不是100％确定它是否是您正在寻找的，但可能对某人有用

Answer 2

要记住几件事：

所有z-indexed元素应为position: relative或position: absolute，否则IE 6和7将无法正确处理它们。

另外，IE 6和7相对于其兄弟元素处理z-index，而不是所有元素。 ex =＆gt;

<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，这里有一个潜在的快速修复=＆gt;
http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery

Answer 3

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

所以你需要做的是设置父显示：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);
    }
}

在怪癖模式下IE7 CSS Z-Index问题

3 个答案: