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

我一直想弄明白这一点，所以任何帮助将不胜感激。我有一个由ul/li组成的Suckerfish菜单。我正在尝试添加一些自上而下的滚动指标到我的菜单。在我的例子中，我有一个蓝色和绿色的指标，它们现在只放在菜单中。这些指标只是UL内的另一个LI，但风格各异。我已经把它们定位在一个固定的顶部。如果你看看使用firefox的例子并将鼠标悬停在Blah Reports上，你可以看到2个指标出现。在怪癖模式下的IE7 CSS Z-Index问题

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

如果您在IE7中打开它，并悬停在他们不露面布拉赫报告。但是，如果您在子菜单展开时将鼠标悬停在其中一个子项目上（即合规性），则指示器确实变得可见。我无法弄清楚，一旦子菜单扩展，指示器就会显示出来。

如果有人可以给我一个提示或提示什么是缺少让IE在这个工作，我真的很感激它。

感谢，劳尔

PS）我都用怪异模式

更新所以我已经把范围缩小到一个事实，即IE不会解决绝对定位的元素，因为该UI被隐藏并且当ul变得可见时，IE不返回并重新计算位置。如果我等待直到ul可见，那么我将这个类重新分配给指示器以重置对它们显示的元素的定位。这是不理想的，因为现在我的指标不会随着菜单淡入，而是在事后显示出来。

任何其他提示？

来源

2010-08-10 HaxElit

你确定你必须使用怪异模式？你为什么不能切换？ – 2010-08-10 14:59:34

这是完美的FireFox？我通常所做的就是让它在现代浏览器中正常工作，然后用黑客/错误修复程序回溯到IE中。 – JKirchartz 2010-08-10 15:05:54

我需要怪癖模式，因为我们使用的是Reporting Services 2005，并且它在标准模式和高度= 100％下播放效果不佳 – HaxElit 2010-08-10 15:17:05

好吧，我想通了，对于那些你们谁是感兴趣。在IE中最终发生的事情是，如果父元素从display：none更改为display：block，绝对定位的子元素将永远不会在布局引擎中处理，因此他们永远不会获得其初始偏移集。

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

来源

2010-08-10 20:59:57 HaxElit

看看this它为我工作了一阵子。 Althought不是100％肯定，如果它有什么乌尔寻找，可能是别人有用

来源

2010-08-10 15:06:43

它不适用。在他的情况下，他有2个堆叠环境。在我的情况下，我在UL上有一个堆栈环境，所有的LI都是其中的一部分。 – HaxElit 2010-08-10 15:18:27

几件事情要记住：

所有的Z-索引的元素应该是position: relative或position: absolute否则IE 6和IE 7不会正确对待他们。同样，IE 6和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

来源

2010-08-10 18:47:03 waymondo

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

回答

相关问题