Using Bootstrap 3 with Internet Explorer 8 (IE8)

In a recent website development project we had the struggle of conforming Bootstrap 3 to format correctly in IE8.

After much digging we were able to find a solution that worked effectively for us and thought we’d pass along the help.

THE PROBLEM

Every col-* class we had setup within our document was running full width across the screen. It was as though every element had been set to col width of 12 and stretched all the way across the screen. Everything still stacked correctly, everything still looked alright, it was just ignoring any widths and/or floats that should have been implemented.

THE FAILED SOLUTIONS

Following the guidelines on the Bootstrap site, we were sure to correctly reference, and include, the respond.js. Which, was set within conditional comment for anything less than IE9. Tried adding Modernizer, thinking maybe THAT was problem. Re-referenced the bootstrap.css file to pull locally instead of from the CDN, since we saw THAT might be a solution as well.

Somewhere online told us to use this meta tag:

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

Nothing was working. Like you, we even cursed IE, as is our right. So what did work?

THE SOLUTION

The answer, css3-mediaqueries-js. This beautiful little javascript is as simple as including it on your page. Once included, the the script allows IE 5+, Firefox 1+ and Safari 2 to “transparently parse, test and apply CSS3 Media Queries.”

<script src="assets/js/css3-mediaqueries.js"></script>

According to the author’s site, the script will not work with @imports, which you shouldn’t be using anyway. Additionaly, “[the script] won’t listen to the media attribute of the <link> and <style> elements.”

Be sure to insert the script into the head area of your page. Unlike other scripts, you want to be sure this script is run before the entire page is parsed or the user may see a weird jumble as the page loads. Additionally, you can probably load this within a commented conditional statement to only run if the browser is less than IE9.

Here’s a clip of the entire head area we created to ensure it functions correctly.

Written By

Joe Martin has over 14 years in the field of web design and development, with a Bachelor's degree in Interactive Media Design from the Art Institute.

Robbie Reynolds

In a web development world where we still have to (unfortunately) deal with IE8 or less, I have been looking for a way to solve the incompatibilities between IE8 and bootstrap 3. I have implemented all of the above solutions you mentioned and to much frustration, still the @media queries are not rendering correctly in IE8.

After discovering your blog about this issue, I implemented the css3-mediaqueries.js and now the pages load the body background, but no content. Very strange (and aggravating)!

Did you include css3-mediaqueries.js along with html5-shiv.js and respond.js? If so, what order did you load them? Also, jquery.js loaded before or after?

Is this correct?:

suitfits

Same here… I would love to see the author answering Robbie’s doubts.
Could you show us a HEAD snippet with all the assets and ie conditionals that made up your solution?
Thanks for sharing anyway

Marc Sch

I’m just wondering if this could have anything to do with loading a test file locally in stead of through a webserver? I tested this and with me this made the difference

rizerzero

exactly what i have noticed on web server , just html5.shiv and respond.js does the job guys
remember that jquery is needed before all these js files and they need to be at the top of the of the page

This does not seem to do anything for me either in IE8. I still get the mobile styles in the IE8 desktop view. I am not loading a test file locally but via a web host. jQuery and a script are before the closing body tag.

SunTrust – Your Equity Line is Maturing. What are your options?

some styles here

telegraphics

Terri,

My guess is that you’re still going to need the IE specific stylesheets Bootstrap provides, by default.

For me, all i had to include was respond.js to fix this problem — as specified on the bootstrap “getting started” page under “browser and device support”. I did not need css3-mediaqueries

Putu

thankyou, this really helpfull

Steph

Thanks, it helped me a lot after searching a few hours

Corneliu

The respond.js has to pass the same-origin policy in order to function in IE, otherwise it will fail silently. First of all, you have to load this library locally, and not by using a CDN lile cdnjs.cloudflare.com

NaWiMa

How come you decided to use all four of the javascript libraries to deal with the IE 8 issue? I work extensively with IE8 and have simply included the HTML5.js and RESPONSE.js libraries with an external link and backup local copy without any issues reported. Curious if you have seen users fall through the HTML5 and RESPONSE.

JD Hendrickson

Thank you!! This was exactly the solution I was looking for.

Juan Pujol

Guys, I had a problem with this and none of your solutions seem to solved. It so happens the problem was with the minification using uglify on my Gruntfile.js. Witch was causing some incompatibilities with select2.js. Anyways. Add this to your grunt tasks.