Bootstrap dropdown not working in IE8

Question

I am using the Bootstrap framework to design my site. I have the drop down working in the navigation, but from some unknown reason in IE8 the dropdown does not work. When you click on the About Us link, the drop down does not fully appear. This only happens in IE8.

It works fine in other browsers.

You can view it here:

https://dl.dropboxusercontent.com/u/52725754/fightback-responsive/index.html

Can anyone help with this problem?

Answer 1

Here is the solution to this issue on the Bootstrap GitHub forums: https://github.com/twitter/bootstrap/issues/6548 . It seems as though native IE8 will sometimes break due to the filter: parameter which is used throughout Bootstrap css for gradients etc. The solution is to add filter:none!important; to an element like .navbar or .navbar-inner. The former worked out for me.

Answer 2

I had a problem with drop down menus on IE8 using bootstrap 3.3.4. I managed to resolve the problem by using jquery version 1.11.2 instead of jquery version 2+.

Answer 3

There is an issue in with bootstrap-theme (in IE8 and IE9), see this thread .

To confirm this is your issue,

• check that dropdowns work on Bootstrap's navbar example
• comment out the inclusion of bootstrap-theme.min.css . Dropdowns should then appear.

I used the following workaround (suggested in the first link):

• use bootstrap-theme.css rather than the .min version
• comment out the lines filter: progid:DXImageTransform.Microsoft.gradient(...)

Mark Otto also suggested to wrap the contents of the navbar in another div, and add there the style tweaks.

Hope this helps

Answer 4

I had the issue with the dropdown not showing in IE8 using bootstrap version 2.3.2.

Having read a few feeds I came to this answer adding it to my conditional styles sheet for IE8 & 7.

/** Fixes the problem for dropdowns in IE8 compatibility mode **/

.navbar-inner{filter:none;}

Hope this helps :)

Answer 5

IE8 fix for twitter bootstrap responsive menu:

For me the **menu-toggle** button appeared in IE8 so to make it appear as normal menu I used

<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

And a seprate CSS for IE8 containing the below classes 
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" />
  <![endif]-->

Include the below classes inside the ie8.css file

.navbar-header, .navbar-collapse, .collapse{display:none;}
.collapseie8 ul li{ float:left; }
.navbar-nav, .collapse{ display:block; }
    .navbar-inverse.nav li.dropdown.open > .dropdown-toggle,
    .navbar-inverse.nav li.dropdown.active > .dropdown-toggle,
    .navbar-inverse.nav li.dropdown.open.active > .dropdown-toggle, .nav, .navbar, .navbar-inverse.navbar-inner { 

        filter: none!important;
        background-image: none;
    }

 <div id="defaultmenu" class="navbar-collapse collapse collapseie8">
                <ul class="nav navbar-nav ">