IE8 issue with Twitter Bootstrap 3

Question

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.

In IE8 it seems to be displaying elements o

Answer 1

I had exactly the same problem when migrating from bootstrapv2 to v3.

If (like me) you migrated by replacing the old spanX with col-sm-X you also need to add col-X classes. col-X are the styles that are outside of any @media blocks so they work without media query support.

To fix the container width you can set it yourself outside of a @media block. Something like:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

Answer 2

As previously stated there are two different problems: 1) IE8 doesn't support media queries 2) respond.js used in conjunction with cross-domain css files must be included as described before.

If you want to use BootstrapCDN here's a working example:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Also make sure to copy respond.proxy.gif, respond.min.js and response.proxy.js in local directories

Answer 3

I had this same issue when transitioning from Bootstrap 2 to 3. I'd already got respond.js and html5shiv.js and set my meta to edge. I'd missed that from 2 to 3 the navbar element type had changed. In Bootstrap 2 it was nav. In Bootstrap 3 it's now header. So to fully resolve the problem I had to

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Put this right after I'd loaded my css:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

and then change

<nav class="navbar" role="navigation">
</nav>

to

<header class="navbar" role="navigation">
</header>

Oh and for good measure I also added

<meta name="viewport" content="width=device-width, initial-scale=1.0">

simply because that's what the Bootstrap site itself has.

Answer 4

If you use Bootstrap 3 and everything works fine on other browsers except IE, try the below.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Answer 5

Use this solution

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

This string <script src="js/css3-mediaqueries.js"></script> enable mediaqueries. This string <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> enable bootstrap fonts.

Tested on Bootstrap 3.3.5

Link to download mediaqieries.js. Link to download bootstrap-ie7.css

Answer 6

From the explanation it says that IE8 is the standard version for you and making content="IE=edge" will render the page in the highest mode. To make it compatible change it to content="IE=8".

IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

Reference What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?