Twitter引导程序按钮下拉列表在IE9中无效

Question

UPDATE: Ok, I found the cause. The grey area where the button resides is a div for the navigation. It has fixed position and a high z-index to make it float above other elements. This is what's causing the problem. If I remove the z-index of the parent DIV, it works fine. But I can't do that because the other elements will then overlap the fixed navigation div.

How it's Supposed to Look like (FIREFOX)

How it is rendered in IE (9)

Full Code:

<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>

Anyone got any ideas or workarounds/overrides I need to put in the CSS to cover this problem?

Answer 1

.dropdown-menu{
z-index:99;
}

Should do the trick...Though depending on the version of IE there are some caveats.

Answer 2

I had the same issue with bootstrap 3. Removing the filter property from the .navbar class worked for me.

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