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

由于某些原因，当我在任何数字的标题中添加

z-index

时，我无法在IE上显示下拉菜单。当我移除它时，它就工作了。然而，在Firefox和Chrome中，该下拉列表会出现在容器和内容后面。所以，我要么把它拿出来，要么把它放进去，我似乎不能满足所有的浏览器。所以我试着制作一个没有z索引的独立IE样式表，但这也不起作用。我知道独立的IE CSS正在工作，因为我改变了背景，但它使用了主样式表中的下拉菜单

网站是www.stingrayimages.ca

谢谢你的帮助

编辑：所以我们就说我把所有的东西都用在了IE上，因为IE总是会带来问题。但现在，在firefox和chrome等浏览器上，下拉菜单出现在内容后面。我所做的只是删除了#head div中的z-index。要修复下拉菜单而不向head 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;
}

---

我不确定你对哪个版本的IE有问题，但我试过IE6和IE7，菜单系统完全坏了。我这里没有IE8、9或10要测试，但我还是会猜一猜解决方案

如果将

z索引

和

位置

也添加到

#容器

中，应该可以解决您的问题<代码>z索引仅适用于定位元素

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

它还值得一读，它总结了属性，并描述了使用

z-index

和IE时的问题

编辑：哇，直到我发现一台装有IE8的机器，我才意识到出了什么问题。我认为您对标准CSS和IE特定CSS原则有点误解。IE特定CSS文件应仅包含与标准文件不同的属性。您的

ie style.css

文件包含所有规则的副本，并且包含在ie的所有版本中。IE8比IE6/7更符合标准，您应该很少需要覆盖该版本的css

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

filter

属性

你有

过滤器：alpha（不透明度=93）

在

style.css

和

ie style.css

中，即使它实际上应该只属于IE6/7 css文件。如果从两个样式表中删除

过滤器
，则菜单将正确显示在IE8中

如果您需要在IE6或IE7中使用不透明度，我建议为这些浏览器创建一个特定的CSS文件，并使用条件注释将其包含在这些版本中。
我不确定您对哪个版本的IE有问题，但我尝试了IE6和IE7，菜单系统完全崩溃。我这里没有IE8、9或10要测试，但我还是会猜一猜解决方案

如果将
z索引
和
位置
也添加到
#容器
中，应该可以解决您的问题<代码>z索引
仅适用于定位元素

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

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

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

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

你有
过滤器：alpha（不透明度=93）
在
style.css
和
ie style.css
中，即使它实际上应该只属于IE6/7 css文件。如果从两个样式表中删除
过滤器
，则菜单将正确显示在IE8中

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

我已经使用过的另一个解决方案非常简单，但却是一个难题*。必须为所有父容器指定一个比要在其他容器上显示的z索引值更低的特定z索引值

像这样：

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

正确放置徽标

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

拆下导航定位

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

问题是，我甚至看不到IE中的菜单鼠标有任何影响
 看看这个解决方案：

我已经使用过的另一个解决方案非常简单，但却是一个难题*。必须为所有父容器指定一个比要在其他容器上显示的z索引值更低的特定z索引值

像这样：

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

正确放置徽标

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

拆下导航定位

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

问题是，我甚至看不到IE中的菜单鼠标有任何影响
 好吧，我看了一下，有好消息也有坏消息；）

#head
div中的不透明过滤器意味着正在触发
溢出：隐藏
，这就是为什么没有菜单（恐怕这是过滤器和溢出的不幸副作用）。。去掉它，你就可以得到你所需要的z-索引了

接下来，要获得下拉列表的透明度（不透明度），您可以使用
rgba（255255,0.9）
o