Using Bootstrap 3 with Internet Explorer 8 (IE8)

bootstrap-3-and-internet-explorer-ie-8
  • October 24, 2013
  • By Joe Martin
  • Coding

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.

	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		
	<link rel="stylesheet" href="assets/css/tg.css" type="text/css"/>
		
	<!-- Javascript -->
	<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
	<script type='text/javascript' src="assets/js/css3-mediaqueries.js"></script>	

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->

THE TROUBLESHOOT

Be sure you’re loading Bootstrap.css locally and not through a CDN. Something with respond.js doesn’t allow it to parse the CSS correctly when it’s loaded through an @import or through the CDN.

Added January 2014

Any other solutions, comments or praise are always welcome in the comments section. Hope this helped!

Tags: , ,


Written By

Joe MartinInteractive Director for Telegraphics, Inc.

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

    • telegraphics

      Sorry for the delayed response, guys! Here’s a snippet from the head:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=1170">
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="shortcut icon" href="assets/img/favicon.png">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>Exploratorium</title>
      <link href='http://fonts.googleapis.com/css?family=Londrina+Solid|Open+Sans:400,700|Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
      <!-- Bootstrap core CSS -->
      <link href="assets/css/bootstrap.min.css" rel="stylesheet">
      <link href="assets/css/bootstrap-select.min.css" rel="stylesheet">
      <!-- Bootstrap theme -->
      <!-- <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet"> -->
      <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
      <!-- Custom styles for this template -->
      <link href="style.css" rel="stylesheet">

      <script src="assets/js/modernizr.custom.51611.js"></script>
      <script src="assets/js/css3-mediaqueries.js"></script>
      <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="assets/js/respond.min.js"></script>
      <![endif]-->

      </head>

      You can also preview this in it’s dev environment, before it went live, at: http://www.joemart.in/hampton/exploratorium/

      • Bhavy

        awesome solution! Worked for me. Thanks a bunch tg! 🙂

  • Terri

    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.

      <!--HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="assets/js/respond.min.js"></script>
      <![endif]-->

      You can grab the respond.min.js file here: http://www.joemart.in/hampton/exploratorium/assets/js/respond.min.js

      • corky

        Not stylesheets, those are javascript files.

  • jz

    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.


    uglify: {
    options: {
    beautify : {
    beautify: false,
    ascii_only: true, // this is the important one.
    quote_keys: true
    }
    }
    }

  • Keith Holliday

    Thanks for this solution! At my job we still support IE8, and I was having trouble with compatibility.

  • Shamick

    Thanks Joe Martin!

  • Nicola Elvin

    The comment about a local verison of bootstrap saved me. Thanks, I had been debugging this for an hour!

  • Hir dihora

    css3-mediaqueries.js not working any media query in ie8! please give me better solution..Thanks

  • This post saved my tail on SEVERAL bootstrap sites I’ve launched recently that all had this same problem!

    Best post I’ve ever seen on this topic, from a writing standpoint, and with solutions that ACTUALLY worked.

    Praise to tg!

  • Fiyin Bamigbola

    Thanks a lot worked like a charm…:) a simple solution to a 2hour problem

  • None of this worked for me. I included in this order: Modernizr, css3-mediaqueries.js (the link was broken by the way), bootstrap.min.js.

    In a conditional statement for IE8 i’ve included the HTML5 shiv and the respond.min.js.

    All of the content is still flowing across 12 columns.

  • vidya

    thank you i got the solution

  • vidya

    i am facing problem like is not working for xs md any solutions can i accept

  • Kapil

    Great work thank you,, Will this code work for bootstrap 2.3 version ? Please reply

  • Mike Hansen

    I have this exact issue, the link to acess the script is broken. Is there an updated link?

  • aggu mallesh

    Am facing the same problem in IE9, no clue why. can some one give any solutions?

  • John D

    I get to deal with this starting next week. Starting to build out many applications that will have IE8 dependencies. I can’t wait. IE8 and IE9 turn a good time into pure frustration.

  • Gary Grubb

    respond.js allowed my IE8 clients to work…

  • thilini chatumali

    thanks.i got the solution for my proble

  • Ukpebor Ofure

    Thank you! This works for me.

  • dhiraj

    css3-mediaqueries-js. link shows 404 error

  • Vel Murugan S

    Great Post. Saved me in right time.

Tips on improving your existing site, the latest from Google and more.

Telegraphics, Inc.
An Interactive Media Company
9703 Cary Ave
Schiller Park, IL 60176
847-834-9327
info@telegraphicsinc.com
support@telegraphicsinc.com