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。无论如何要在不向头部 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 被触发，这就是为什么没有菜单(这是过滤器和溢出的不幸副作用 I恐怕...删除它，你就可以得到你需要的 z-index

接下来要获得下拉菜单的透明度(不透明度)，您只需在 #nav ul li ul 规则上使用 rgba(255,255,255,0.9) 而不是 #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 */  
}

我认为去会很好..

但坏消息

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

虽然我没有做太多研究所以 YMMV

我还注意到 IE7 中的一个或三个问题，不确定您是否想要支持它，但万一您支持......或者想检查我的最终代码，我将它粘贴到 PasteBin 中

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

---

更新:更多好消息和一些坏消息!

由于 CSS3 PIE 自己的 -pie-background 属性，您可以拥有透明度和圆 Angular ，但框阴影不是嗯，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]-->