下拉菜单隐藏在 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 包含 position
和 z-index
以便脚本可以访问这些值。
向提出这个问题的人表示敬意 - 为我省去了很多麻烦。
【讨论】:
以上是关于下拉菜单隐藏在 IE 中的其他元素后面的主要内容,如果未能解决你的问题,请参考以下文章