隐藏在 IE7 内容后面的下拉导航栏答案

【问题标题】：Dropdown nav bar hiding behind content in IE7隐藏在 IE7 内容后面的下拉导航栏
【发布时间】：2012-08-29 02:44:53
【问题描述】：

我有一个下拉导航栏，当您将鼠标悬停在项目上时，下拉选项出现在 IE7 中，它们隐藏在滑块后面。

我试过z-index 没有运气。此外，菜单按钮和IE7中的第一个选项下也有一些间距。我还没有尝试解决这个问题，我主要关心的是让它显示在滑块内容上方。

你可以在这里看到它：http://www.condorstudios.com/stuff/temp/index.php

【问题讨论】：

链接指向一个文件夹 -- 没有索引。
你确定？对我有用...索引应该是 index.php
尝试在 jsfiddle.net 上复制您的问题。我没有IE7，所以帮不了你。
@Cthulhu 如果你有 IE8，你可以使用开发者工具在 IE7 引擎中运行浏览器。不确定 IE9 在这方面提供了什么。我会看看我是否可以在 jsfiddle 上想出一些东西。

标签： css internet-explorer-7

【解决方案1】：

将此添加到您的 $(document).ready() 处理程序：

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

为了确保这仅在 IE7 上执行，请将这个 outside 添加到您的 <script> 标记中，但在 <head> 中：

<!--[if IE 7]>
<script type="text/javascript">
    $(document).ready(function() {
        var zi = 1000;
        $('*').each( function() {
            $(this).css('zIndex', zi);
             zi -= 10;
        });
    });
</script>
<![endif]-->

【讨论】：

你能给我一个在哪里添加它的例子吗？我不是一个大 JS 人。
@Brett 在您的索引页面的第 30-31 行（不确定原始 PHP 源代码中的哪一行），您有：<SCRIPT type=text/javascript> $(document).ready...。在左大括号之后添加。
只是看；有没有比这更干净的方法。现在看起来我页面中的每个元素似乎都应用了内联样式用于 z-index，而我页脚中的内容最终以 -930 等的 z-indexes 结束
@Brett 我不知道。问题在于，出于某种原因，IE7 似乎在识别元素堆栈方面存在问题。看来你无论如何都必须做一个“黑客”。对不起。
我想我会尽我最大的努力将这个 hack 只保留在 IE7 上，这样它就不会对其他浏览器造成混乱。

【解决方案2】：

我解决了同样的问题recently here，所以这里有两个针对 IE7 的修复：

CSS:

/* show menu above content */
#nav li {
    display: block;
    position: relative;
    z-index: 1;         // force IE to recognize stack at this point
}

/* normalize layout, IE7 not makes this automatically */
body,ul,li {
    margin:0;
    padding:0;
}

【讨论】：

是的，我在发布我的帖子之前看到了您的帖子，但无法让它发挥作用。我也已经使用了 reset.css，甚至尝试直接在 li 类上为它们使用边距/填充，但它没有用，所以不知道为什么我得到间距。 IE 很有趣 :)