下拉菜单在 Firefox/Chrome 中不起作用
所以我们只能说我在 IE 上可以正常工作，因为总是 IE 带来问题。但现在下拉菜单出现在其他浏览器（如 Firefox 和 Chrome）的内容后面。我所做的就是删除 #head div 中的 z-index。
网站：http://www.stingrayimages.ca/
使用 Z-index：它在 IE 中中断 没有它，它在其他浏览器中会失败。
无论如何要修复下拉菜单而不将 z-index 添加到 head div 吗？
#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;
}
So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您需要减少不透明度。当下拉列表显示在图像上时，它会被冲掉，这使得它看起来像是在图片后面。
此外，IE9 也出现了与 Chrome 和 FireFox 4 相同的问题。
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
使用 z-index，只需将较高的 z-index 应用于位于顶部的下拉元素，或者您可以将 - z-index 值应用于后面的所有内容，无论哪种方式都有效。
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
您可以做的一件事就是放回 z-index 并查找 IE 修复程序。
另一件需要考虑的事情是 html 的渲染顺序和树结构，因为这会影响顶部的内容。 http://www.smashingmagazine.com slimingmagazine.com/2009/09/15/the-z-index-css-property-a-compressive-look/ 这篇文章比我解释得更好。
如果您能够链接您正在处理的网站的示例，可能会让我们更容易给出更具体的答案。
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.