Question

IE再次被证明是我存在的祸根。我正在处理的网站的顶部有一个水平菜单，其中的一项触发了一个纯CSS菜单，该菜单位于父菜单DIV（相对位置）的绝对位置。这样就可以在IE和符合W3C标准的浏览器中完美地放置菜单。

当我在页面上有更多定位元素时会出现问题。这些也是相对的，因为它们内部的数据需要绝对定位...再次，这在我测试过的所有浏览器中都能正确显示。

问题是，然后打开顶部菜单，部分被页面下方的定位元素遮挡 - 实际上，即使在所有元素上定义了z-index属性，它也位于这些元素之下。（在CSS文件和内联中）。

让IE正确显示的唯一方法是将菜单的实际HTML放在页面底部，下面（以DOM术语）放置页面上其他位置的元素。我只会这样做是绝对的最后手段。

所有元素都是相同的类型（div）。这是相关的HTML：

<div id='menu'>
<div id='cat_menu' style='display:none;z-index:10000;'>
<table cellspacing='0' cellpadding='0' class='brmenu' width='100%'>
    [data]
</table>
</div>

<div class='product_new' style='z-index:20;'>[data]</div>
<div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>

相关的CSS：

div#menu {
height: 26px;
padding: 0;
position: relative;
}

div#cat_menu {
position: absolute;
top: 25px;
left: 115px;
width: 300px;
z-index: 1000;
}

 div.product_new {
background-image: url("/images/sp_images.png");
background-position: 0 -108px;
background-repeat: no-repeat;
padding 0px;
height: 40px;
font-size: 9pt;
margin-top: 5px; 
position: relative;
z-index: 20;
}

Answer 1

我遇到了同样的问题。在玩了一下之后我同意大卫：“IE只能可靠地为兄弟元素呈现z索引。”

我确实提出了一个简单的替代解决方案。似乎即将非兄弟元素的z-index呈现为零（就好像它们没有z-index一样）。我通过将有问题的元素及其父元素设置为具有负z-索引来解决问题，将它们放在元素下面，将z-index重置为零，即ie。

Answer 2

尝试：http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

Answer 3

上面针对jQuery的解决方案似乎也适用于Prototype ......我已经在下面包含了PrototypeJS代码：

var zIndexNumber = 1000;
$$("div").each(function(e) {
    e.setStyle({ zIndex: zIndexNumber });
    zIndexNumber -= 10;
});

Answer 4

几点说明：

suckerfish dropdowns被证明效果很好。为什么重新发明轮子？
IE只能为兄弟元素可靠地呈现z索引。因此，最好只将“z-index”元素作为BODY标记的直接子元素。
如果您不想更改标记，则可能需要在“20”以上的#menu元素上设置z-index。问题是设置z-index会将元素从流中取出（这是不合需要的）。
style =“...”属性使css非常具体（要求你在样式表中使用“！important”。请不要忘记迁移这些样式属性）
“position：relative”触发IE的“hasLayout”

IE忽略了定位元素的Z-Index

4 个答案: