Question

我已经在我的一个项目中安装了site5的Boldy主题，并遇到了一个主要问题。

在Internet Explorer（8或更低版本）中浏览时，顶部下拉菜单会显示在其他一些元素后面（主要内容滑块，H1等）。我已经尝试过更改所有内容z-index到固定位置，没有运气。

您可以访问site5的Boldy演示页面http://wordpress.site5.net/boldy/并将鼠标悬停在IE顶部菜单的博客标签上来查看问题。

我已经要求site5调查它，他们已经意识到了这个问题，但未能找到任何解决方案。

Answer 1

Ok原创解决方案 - Swiss credit website。这有效，但使用复杂的z-index解决方案。这里有一个非常简单和改进的解决方案 - Jeyjoo stock image gallery 这适用于IE6 +，firefox，opera，safari和chrome

<强>解决方案

HTML

<div id="container_page" class="container_page">
  <div id="container_header" class="container_header">
    NAV BAR GOES HERE
  </div>
  <div id="container_body" class="container_body">
    ...body text...
  </div>
</div>

CSS

#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}

工作原理

你必须告诉IE这两个div是如何相互关联的。

Answer 2

（不是我的剧本）很确定我可能在这里找到了答案，但我找不到。无论哪种方式，这对我来说都很有用......

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

只需确保您的css包含position和z-index，以便脚本可以访问这些值。

对任何想出这个的人都感到很荣幸 - 给我带来了很多麻烦。

Answer 3

如果我没弄错的话，IE没有正确地从菜单中的子li项的top-nav继承z-index。这就是z-index为60的照片覆盖它的原因。你可以在这做两件事。

消除照片z-index。
直接为子列表指定z-index为100，而不仅仅是top-nav列表。

Answer 4

我看到你还没有解决这个问题。我在子菜单上找到了一个解决方案 - Chkredit - swiss credit website 适用于所有版本的IE，并且轻巧且100％CSS（无javascript）。

基本上问题是IE没有正确使用z-index。检查CSS代码中的z-index。你需要在菜单隐藏的项目上加上z-index -1。

我现在为自己的图片库处理完全相同的问题（转到“顶部图片”页面） - jeyjoo image gallery

下拉菜单隐藏在IE中的其他元素后面

4 个答案: