Our blog, keeping you up-to-date on our latest news.

 

Bootstrap 3 And IE 8

October 28, 2013 at 10:03 am | Blog | 3 comments

 

I was working on a website template based on Bootstrap 3. And during the test in IE8 Compatibility Mode, I found that it did not work as desired. The responsive grid system did not work in IE 8. All columns took the whole width.

At the beginning, i thought the respond.js might not be included. but I checked the html code, and the following code was added:

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

It says, if it is less than IE 9, include the html5shiv.js and respond.min.js.

And i also view the javascripts with IE’s Developer Tool, and they are also included.

developer

In the bootstrap site, it clearly state that IE 8 is supported:

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that many CSS3 properties—e.g., rounded corners and shadows—are not supported by IE8. The placeholder attribute is also not supported in either of these versions.

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

Then, what is missing?

I checked the Respond website, and found this:

Respond.js doesn’t parse CSS refrenced via @import, nor does it work with media queries within style elements, as those styles can’t be re-requested for parsing.

Actually, i imported the bootstrap css as a lib in my style.css file. And that causes the respond.js not working.

To fix this issue, it is very easy, you can add the style in your header.php directly like this

<link rel="stylesheet" href="<?php get_template_directory(); ?>/css/bootstrap.min.css">

instead of import the bootstrap in your style.css.

It is always a good practice to understand rationale beneath instead of using them blindly.

<< Back to Blog Discuss this post

 

3 Comments to “Bootstrap 3 And IE 8”

  1. Calli says:

    Thanks for this, I’m experiencing the same problem. What was your work around for this? If I take out the imported bootstrap css, my stylesheet breaks.

    admin Reply:

    Hi, you should include the css in the header.php directly.

    admin Reply:

    I have update the blog with detail solution. please read the last paragraph again.