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

Posted

技术标签:

【中文标题】下拉菜单隐藏在 IE 中的其他元素后面【英文标题】:Dropdown menu hides behind other elements in IE 【发布时间】:2011-04-27 17:35:24 【问题描述】:

我在我的一个项目中安装了 site5 的大胆主题,但遇到了一个主要问题。

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

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

我已经要求site5调查,他们知道问题,但没有找到任何解决方案。

【问题讨论】:

【参考方案1】:

好的原始解决方案在这里 - 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 是如何相互关联的。

【讨论】:

我只是想告诉人们我讨厌 ie 8,不过谢谢你,我真的需要它,我不知道发生了什么【参考方案2】:

我看到你还没有解决这个问题。 我在子菜单上找到了解决方案 - Chkredit - swiss credit website 可在所有版本的 IE 中使用,并且轻巧且 100% CSS(无 javascript)。

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

我现在正在为自己的图片库解决完全相同的问题(转到“顶部图片”页面)-jeyjoo image gallery

【讨论】:

【参考方案3】:

如果我没记错的话,IE 没有正确地从菜单中子 li 项的顶部导航继承 z-index。这就是 z-index 为 60 的照片将其覆盖的原因。您可以在这里做两件事。

    消除照片 z-index。 直接为子列表指定 z-index 为 100,而不仅仅是顶部导航列表。

【讨论】:

【参考方案4】:

(不是我的脚本)很确定我可能在这里找到了答案,但我找不到。无论哪种方式,这对我来说都很棒......

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

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

向提出这个问题的人表示敬意 - 为我省去了很多麻烦。

【讨论】:

以上是关于下拉菜单隐藏在 IE 中的其他元素后面的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 模态中选择的下拉菜单隐藏在模态页脚后面

隐藏许多选项时选择元素下拉菜单上的 Chrome 错误

为啥下拉菜单隐藏在jQuery按钮后面?

下拉菜单隐藏在图片后面

jQuery 如何实现 “鼠标悬浮下拉菜单” 效果?

选择固定宽度的下拉菜单,在 IE 中截断内容