Question

所以，我只想说我已经把它全部用在了IE上，因为它总是IE提出问题。但现在，下拉菜单会出现在其他浏览器（如firefox和chrome）上的内容后面。我所做的就是删除#head div中的z-index。

网站：http://www.stingrayimages.ca/

使用Z-index：它在IE中中断没有它，它在其他浏览器中失败。

无论如何修复下拉菜单而不向头部div添加z-index？

#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;
}

Answer 1

你需要减少不透明度。当图像显示在图像上时，下拉状态会消失，使其看起来像是在图片后面。

此外，IE9显示与Chrome和FireFox 4相同的问题。

Answer 2

使用z-index，只需将更高的z-index应用于位于顶部的下拉元素，或者您可以将-z-index值应用于所有后面的内容，无论哪种方式都有效。

Answer 3

你可以做的一件事就是把z-index放回去，然后查找IE修复程序。

要考虑的另一件事是html的渲染顺序和树结构，因为这会影响顶部的内容。 http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/这篇文章解释得比我好得多。

如果您能够链接您正在处理的网站示例，则可能会让我们更轻松地提供更具体的答案。

下拉菜单在Firefox / Chrome中不起作用

3 个答案: