1

我正在使用 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上制作了一小部分页面来演示该问题。

4

1 回答 1

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>
于 2013-04-18T03:42:36.700 回答