Twitter Bootstrap Button Dropdown Does Not Work in IE9

Question

UPDATE: Well, I found a reason. The gray area where the button is located is the div for navigation. It has a fixed position and high z index so that it floats over other elements. This is the cause of the problem. If I remove the z-index of the parent DIV, it works fine. But I cannot do this because the other elements then overlap the fixed navigation div.

What it should look like (FIREFOX)

How it is displayed 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> 

Has anyone got any ideas or workarounds / overrides that I need to include in CSS to solve this problem?

Answer 1

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

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

Answer 2

I had the same problem 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);*/ }