为什么菜单显示在图像后面？ [复制]答案

【问题标题】：Why is menu displaying behind image? [duplicate]为什么菜单显示在图像后面？ [复制]
【发布时间】：2011-04-04 03:46:49
【问题描述】：

在本站：http://www.multiway.dk/ 下拉菜单显示在标题图像后面，我不太明白，因为菜单有 z-index: 100;并且图像的 z-index:1;

在FF中可以正常使用，但是在IE中就不行了？？

【问题讨论】：

我检查了你的菜单，它没有 z-index。你把它放在什么课上？你也把你的位置设置为绝对吗？你能给我们提供一张我们应该看到的截图吗？因为菜单出现在我的FF中的标题之后

标签： html css internet-explorer z-index

【解决方案1】：

是的，我有一段时间了。我个人用过：

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

那里有很多修复（：

【讨论】：

嗯，我也放 z-index: 3000;在我的菜单上，z-index:1000；在菜单容器上？不能完全弄清楚如何使用它？ :S

【解决方案2】：

这是著名的 Z-Index 错误

由于某种原因，Internet Explorer 做了一些非常时髦的事情，并且有它渲染的几个已知错误推动 Web 开发人员喜欢的引擎我疯了。虽然大多数已知错误发生在相对晦涩的地方情况并在很大程度上被忽视，有一些真的很突出并导致 Web 开发人员浪费很多几个小时试图修复它们。 IE7的方式呈现 z-index 堆叠顺序为一其中。

解决许多问题的方法 IE7是动态反转的默认 z-index 堆叠顺序页面上的元素。这会确保你的元素更高 HTML源代码也会有更高的页面上的 z-index 顺序，解决大多数 IE 堆叠问题。如果你正在使用 jQuery（最好的有 Javascript 库），这里是快速修复：

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

Ref

编辑：将该 jquery 代码移至 IE 条件 cmets。

<!--[if IE lte 7]>
<script type="text/javascript">
$(document).ready(function(){

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

$(".panel img").css("z-index","-1");
$(".menu_item").css("overflow","visble");


});

</script>
<![endif]-->

【讨论】：

我试过了，如果你现在查看代码，它包含了 jQuery，但它仍然无法工作？
@Nicky ：查看编辑后的代码是否有效。将其从主代码中删除（在其他浏览器中会导致问题），并将其放入 IE 条件代码中。
我认为在 IE8 中默认应该没问题（假设）尝试将条件代码更改为 [if IE lte 7]（上面更新）这将仅在 IE lte 中触发代码（小于或等于） 7. 对于菜单上的内部 div——我添加了 $(".menu_item").css("overflow","visble");到 IE cmets，看看是否有帮助。
没有 IE8 :( - 祝你好运