代码之家 › 专栏 › 技术社区 › HaxElit

IE7特殊模式下的CSS Z索引问题

quirks-mode z-index internet-explorer css html

HaxElit · 技术社区 · 14 年前

我已经试着解决这个问题一天多了,所以任何帮助都会被感激的。我有一个由ul/li’s组成的美味菜单,我正在尝试在我的菜单中添加一些自上而下的滚动指示器。在我的例子中,我有一个蓝色和绿色的指示器,它现在刚刚被放置在菜单中。这些指标只是UL内部的另一个LI,但风格不同。我把它们放在一个固定的顶部。如果你看到使用火狐的例子,并将鼠标悬停在blah报告上,你会看到2个指示器出现。

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

如果你在IE7中打开它并将鼠标悬停在blah报告上,它们就不会出现。但是,如果在子菜单展开时将鼠标悬停在其中一个子项上(即合规性),则指示器确实会变为可见。我不知道子菜单展开后,是什么改变使指示器显示出来的。

如果有人能给我一个提示或提示,什么是失踪,以使这工作在IE我会非常感激。

谢谢, 劳尔

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

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

还有什么建议吗?

3 回复 | 直到 14 年前

Adam Tomat 14 年前

看一看 this 这对我很管用。尽管不能百分之百确定你所寻找的是否对某人有用

waymondo 14 年前

需要记住的几点:

所有z索引元素都应该 position: relative 或 position: absolute 否则,6号和7号不会正确对待他们。

此外,IE 6和7处理相对于ITS的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

HaxElit 14 年前

好吧,我为你们这些有兴趣的人找到了答案。在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);
    }
}