css 显示在其他元素后面的引导下拉菜单- IE7

5jvtdoz2 于 2022-12-24 发布在其他

关注(0)|答案(7)|浏览(148)

我使用的是 Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html
所以我使用他们的'dropdown-menu'类来创建一些简单快速的下拉菜单，但是由于某些原因，在IE7上，它们出现在我网站上的文本和其他元素后面。

测试链接：http://leongaban.com/_projects/defakto/CDS/

我添加了z索引到我的CSS，但似乎仍然没有做任何事情，请帮助！

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    z-index: 10000;
}

IE9、Chrome、FF和其他现代无头痛浏览器：

IE7〉：（

超文本标记语言

<div class="header-nav">

<ul id="nav-account" role="navigation" class="pull-right">

    <!-- Language Dropdown Button -->
    <li id="language-btn">
        <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->

        <!-- Language Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
        </ul>
    </li>

    <!-- User Dropdown Button -->
    <li id="account-btn">
        <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/>
        <!-- <span class="grey_triangle"></span> -->

        <!-- User Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
        </ul>
    </li>
</ul>

css

来源：https://stackoverflow.com/questions/16149701/bootstrap-dropdowns-menus-appearing-behind-other-elements-ie7

7条答案

按热度按时间

webghufk1#

这是一个stacking context问题！

即使你在下拉列表中使用z-index，它也只是相对于同一个堆栈上下文中的元素。你需要添加一个z-index和一个position到一个父元素中，这样才能工作。在这种情况下，我推荐header-topdiv

赞(0）回复(0）举报 2022-12-24

n8ghc7c12#

您只能在定位元素（相对、固定/绝对）上使用z-index，因此请尝试添加：

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    position: relative;
    z-index: 10000;
}

赞(0）回复(0）举报 2022-12-24

lmvvr0a83#

如果增加父元素的z轴（如其他答案中所述）不起作用，则可能是其中一个父元素具有以下属性：