引导菜单在 IE7 上重叠答案

【问题标题】：Bootstrap menus overlap on IE7引导菜单在 IE7 上重叠
【发布时间】：2013-04-06 06:21:04
【问题描述】：

我正在使用 Bootstrap 和 html5shiv.js 构建一个网站。

我有两个“导航栏”div，一个在屏幕上，一个在另一个之上。在 Chrome、Firefox 和 IE9 中，它们看起来和工作正常。在 IE7 和 IE8（或者更确切地说，IE8 模式下的 IE9）上，顶部的下拉菜单出现在其下方导航栏部分的后面。在这张图片中，顶部的“概述”有一个包含三个项目的下拉菜单（“ Person”、“RSS”、“Wiki”）及其下方的导航栏有一个项目“2013-01 rev”，它是一个下拉菜单，通过 Overview 下拉面板显示，还有一个活动项目“Step 1 - People”它显示在下拉面板的前面。

我用IE9开发者工具查了一下，它在下拉面板上显示了z-index（“RSS”和“Wiki”的部分是1000，下面的那个没有z-index。我试过在它下面的那个上放一个 z-index，但它没有帮助。

由于 jsfiddle 似乎无法在 IE7 上运行，我在 http://xen1.xcski.com/tmp/ie7_problem.html 上制作了一小部分页面来演示该问题。

【问题讨论】：

伙计，肯定有很多问题和其他网站都在谈论 IE7 中的 z-index 错误，但不幸的是，我阅读的所有建议都不适用于 Bootstrap 菜单。
你能解决这个问题吗？
@Francium123 不幸的是没有。它在 IE8 中以“兼容模式”发生，它将自己设置为 Intranet 站点。现在我只是想赶时间，直到公司升级到 IE10。
实际上，我收回了这一点。看起来下面的建议奏效了。
太棒了。我有多个相互重叠的下拉菜单，为每个下拉菜单添加了一个 z-index。谢谢！

标签： css internet-explorer twitter-bootstrap internet-explorer-7

【解决方案1】：

尝试在顶部导航（即带有概览、购物车、访问评论等的那个）上添加一个正的 z-index 值。

<div id="top-bar" class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav" style="z-index:1;">...</ul>
    </div>
  </div>
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">...</ul>
    </div>
  </div>
</div>

【讨论】：