Question

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

它在FF中工作正常，但在IE中它不起作用吗？

Answer 1

这是IE中众所周知的错误。

尝试查看

IE is ignoring Z-Index on positioned elements

或

http://drupal.org/node/84608

Answer 2

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

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

有很多修复（：

Answer 3

这是着名的Z-Index Bug

出于某种原因，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条件注释。

<!--[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]-->

为什么菜单显示在图像后面？

3 个答案: