Twitter Bootstrap 按钮下拉菜单在 IE9 中不起作用

Posted

技术标签:

【中文标题】Twitter Bootstrap 按钮下拉菜单在 IE9 中不起作用【英文标题】:Twitter Bootstrap button dropdown not working in IE9 【发布时间】:2013-01-17 20:47:23 【问题描述】:

更新:好的,我找到了原因。按钮所在的灰色区域是导航的 div。它具有固定位置和高 z-index 以使其浮动在其他元素之上。这就是造成问题的原因。如果我删除父 DIV 的 z-index,它工作正常。但我不能这样做,因为其他元素会与固定导航 div 重叠。

它的外观如何(FIREFOX)

在IE中是如何呈现的(九)

完整代码:

<div class="btn-group pull-right">
    <a class="btn btn-primary btn-large dropdown-toggle" style="font-weight: bold; margin-top:15px" data-toggle="dropdown">
    Hi @User.Identity.Name!
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="@Url.Action("Index","Lab")">Open the Lab</a></li>
        <li class="divider"></li>
        <li><a href="/Account/LogOff">Log-out</a></li>
    </ul>
</div>

任何人有任何想法或解决方法/覆盖我需要放入 CSS 以解决此问题?

【问题讨论】:

看起来可能与 z-index 有关。您是否尝试过将 z-index 显式添加到 dropdown-menu 列表和/或列表项? 尝试添加z-index: 99999;并查看结果。 是的,尝试了这些,但它们不起作用。不过感谢您的回复! :) 【参考方案1】:
.dropdown-menu
z-index:99;

应该做的伎俩...虽然取决于 IE 的版本,有一些警告。

【讨论】:

欣赏答案,但我试过了,它似乎不起作用。我觉得这不是 CSS 问题,更像是 Twitter Bootstrap 的 javascript 问题。 很抱歉没有任何帮助。您能否发布页面的链接,以便我可以直接查看代码并查看影响问题的其他因素? 别担心,非常感谢您的意见!我们还没有发布它,它都在我的本地,对不起。上线后我会通知你的。谢谢!【参考方案2】:

我在 bootstrap 3 中遇到了同样的问题。从 .navbar 类中删除 filter 属性对我有用。

.navbar 
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);*/

【讨论】:

以上是关于Twitter Bootstrap 按钮下拉菜单在 IE9 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Twitter bootstrap 在下拉菜单打开时停止传播

在悬停时制作 Twitter Bootstrap 菜单下拉菜单,而不是轻松点击(解决方案)

引导按钮下拉菜单中的引导日期选择器

在 Twitter Bootstrap 中实现下拉菜单背后的想法是啥? [关闭]

Twitter bootstrap 下拉菜单出现在屏幕之外

带有 twitter-bootstrap 的下拉菜单