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

Question

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

网站是 www.stingrayimages.ca

感谢您的帮助

编辑：因此，我们只能说我可以在 IE 上正常工作，因为总是 IE 会出现问题。但现在下拉菜单出现在其他浏览器（如 Firefox 和 Chrome）的内容后面。我所做的就是删除 #head div 中的 z-index。无论如何要修复下拉菜单而不将 z-index 添加到 head div 吗？

编辑：我让下拉菜单可以在 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*/ 部分< /code>

---

更新：更多好消息和一点坏消息！

由于 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;
}

还值得一读重叠和 z-index，它总结了属性并描述了使用 z-index 和 IE 时出现问题。

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

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

您在 style.css 和 ie-style.css 中都有 filter:alpha(opacity=93);，即使它实际上应该只属于在 IE6/7 CSS 文件中为 IE8 过滤器的工作方式有所不同。如果您从两个样式表中删除过滤器，则菜单会在 IE8 中正确显示。

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

Answer 3

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

我已经使用的另一个解决方案非常简单，但是*很痛苦。您必须为所有父容器指定一个比您想要显示在其他容器之上的 z-index 值更低的特定 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 和 men div 的 z 索引为我解决了这个问题。
#bodyWrapper
{
背景：无重复滚动 0 0 #E4F7FE；
溢出：隐藏；
位置：相对；
宽度：100%；
内边距：0 0 60px；
z 索引：-1；
}