Question

由于某些原因，当我在任何数字的标题中添加z-index时，我无法在IE上显示下拉菜单。当我删除它，它的工作原理。然而，下拉列表显示在Firefox和Chrome中的容器和内容后面。所以无论是把它拿出来还是留下它，我似乎无法满足所有浏览器。所以我尝试制作一个没有z-index的单独IE样式表，但这也不起作用。我知道单独的IE CSS正在运行，因为我更改了背景，但它使用主样式表中的下拉菜单。

网站是www.stingrayimages.ca

感谢您的帮助

编辑：所以我只想说我已经把它全部用在了IE上，因为它总是提供问题的IE。但现在，下拉菜单会出现在其他浏览器（如firefox和chrome）上的内容后面。我所做的就是删除#head div中的z-index。无论如何修复下拉菜单而不向头部div添加z-index？

编辑：我得到了下载，可以使用IE9 firefox和chrome。不是IE 6，它只是爆炸了。

#head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
    z-index:1;
}

Answer 1

好的，所以我看了看，有好消息和坏消息;）

#head div中的不透明度过滤器意味着overflow: hidden被触发，这就是为什么没有菜单（这是过滤器和溢出的不幸副作用，我害怕）..删除它和你可以拥有你需要的z-index

为了获得下拉列表的透明度（不透明度），您可以在rgba(255,255,255,0.9)规则而不是#nav ul li ul上使用#fff; （尽管在该规则之前留下#fff，但对于那些无法执行rgba()的浏览器，请回退更多！）

这几乎每个人都很高兴 - 现在你也可以使用渐变过滤器为IE rgba()做透明度..

所以我的规则看起来像这样（在IE条件评论中）：

#nav ul li ul {
  zoom: 1;
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF);   /* IE6 & 7 */    
/*  behavior: url(PIE.htc);*/ /* yuk filter */  
}

我认为这样做会很好..

但是坏消息

行为被注释掉，因为你只能有一个或另一个，透明度或圆角，:(显然

我没有做太多的研究，尽管如此YMMV

我还注意到IE7中存在一个或三个问题，不确定是否要支持，但如果你这样做..或者想要检查我的最终代码到达此阶段我将其粘贴到PasteBin

该代码替换了您的主要CSS - #head规则和整个/*navigation*/ section

更新：更多好消息，有点不好！

你可以具有透明度和圆角，这要归功于CSS3 PIE自己的-pie-background属性，但也不是盒子阴影，方式 PIE 处理框阴影意味着它填充div而不是仅仅在外部绘图，因此-pie-background背景的rgba读数是透明的，但显示用于阴影的灰色颜色！

我的解决方案：

我添加了一个边框以弥补盒子阴影的损失，它看起来并不太糟糕，并且它可以在IE上工作;）这是对上述I条件评论的更新：

<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul  {
    box-shadow: none; 
    -pie-background: rgba(255,255,255,0.9);
    border: 3px double #eee;
    border-width: 0 3px 3px 3px; 
    behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->

Answer 2

我不确定您遇到问题的哪个版本的IE但我在IE6和IE7中尝试过并且菜单系统完全坏了。我没有IE8,9或10在这里测试，但我会猜测一个解决方案！

如果您同时向z-index添加position和#container，则应解决您的问题。 z-index仅适用于定位元素。

#container {
    position:relative;
    z-index:0;
}

还值得阅读Overlapping and z-index，它总结了这些属性，并描述了使用z-index和IE时的问题。

编辑：哇，直到我找到一台装有IE8的机器，我才意识到出了什么问题。我认为你稍微误解了标准CSS 和 IE特定CSS 原则。 IE特定的CSS文件仅应包含与标准属性不同的属性。您的ie-style.css文件包含所有规则的重复项，并且包含在所有版本的IE中。 IE8比IE6 / 7更符合标准，你很少需要覆盖该版本的CSS。

因此，IE将会应用相同样式的多个副本。在正常情况下，大多数浏览器都可以应对这种重复，但其中一个重复是IE特定的filter属性。

filter:alpha(opacity=93);和style.css中都有ie-style.css，即使它实际上只属于IE6 / 7 CSS文件IE8 filters work differently。如果您从两个样式表中删除filter，则菜单会在IE8中正确显示。

如果您需要在IE6或IE7中使用不透明度，我建议为这些浏览器创建一个特定的CSS文件，并使用条件注释将其包含在那些版本中。

Answer 3

看一下这个解决方案：http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/

我已经使用过的另一种解决方案非常简单，但 * 很痛苦。您必须将所有父容器的特定z-index值设置为低于要在其他容器之上显示的值。

像这样：

<parent>//z-index 1
    <child>//zindex 2
         <yourdropdown>//z-index3

更新1

菜单在我的chrome中没有正确显示，所以我将#head z-index修复为80并且它做得更好。执行以下操作以使IE和Chrome以及Firefox中的布局相同。但请注意，我只在主页上测试了这些变化。

将此添加到.conbox类：

.conbox  {
position:relative;
}

正确放置徽标

#logo {
position:absolute;
left:0px;
top:0px;
}

删除#nav定位

#nav  {
margin-top:80px;
z-index:3;
}

问题是，我甚至看不到IE中菜单鼠标悬停的任何影响!!

Answer 4

设置z-index：-1表示菜单覆盖的元素和男性div的z索引为我解决了这个问题。 #bodyWrapper {
背景：无重复滚动0 0＃E4F7FE; 溢出：隐藏; 位置：相对; 宽度：100％; 填充：0 0 60px; z-index：-1; }

HTML / CSS IE不显示我的下拉菜单z-index相关

4 个答案:

更新：更多好消息，有点不好！