Twitter Bootstrap Responsive Layout Doesn't Work in IE8 or Below

Question

I developed the site using twitter bootstrap, and it seems that the responsive part of the layout is broken in all IE browsers from IE8 and below. Is it just not supported for these browsers?

Answer 1

To support @media queries in IE 8 and below, check
CSS3-mediaqueries-JS .

css3-mediaqueries.js from Wouter van der Graaf is a JavaScript library that allows you to transparently analyze, test and apply CSS3 Media Queries for IE 5+, Firefox 1+ and Safari 2. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already have built-in support.

PS: I use Twitter Bootstrap with this plugin and it works amazingly! Hope this helps! :)

Answer 2

If you want the best performance and your structure is not too complicated.

You can try Respond.JS

From the author:

This is not the only CSS3 Media Query polyfill script; but damn good may be the fastest.

If you're looking for more robust CSS3 Media Query support, you can check out http://code.google.com/p/css3-mediaqueries-js/ . When testing, I found that the script would be noticeably slow in rendering (both in files and in performance), but it really supports a lot more media query functions than this script. Big hat advice to the authors! :)

Answer 3

These are the steps I took to get this working:

Take a look at the demo page response.js in IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html

This works so that work locally by loading response.js into your provider / assets or something like that.

Disable the local bootstrap and try to do this in your css:

 /*styles for 800px and up @ 16px!*/ @media screen and (min-width: 50em){ body { background: blue; } } 

It works!

Since I used cdn, I needed to download and host it locally:
http://getbootstrap.com/getting-started/#download

So it works with them:

 = stylesheet_link_tag 'bootstrap.min.css' = stylesheet_link_tag 'bootstrap-theme.min.css' = stylesheet_link_tag 'my-css' = javascript_include_tag 'respond.min' 

You also need to get rid of any @import ads.

Answer 4

I tried all the methods described above and it works, but so slowly. I suggest the following approach. We need to decompose the css file containing @media and paste each rule into a separate file. Then we should conditionally download each file depending on the width of the browser screen. All these actions will make the script cload.js. Download cload.js and read how to use it, here

Answer 5

You should all read this forum post .

This very clearly explains the problems between IE and Twitter Bootstrap. It also gives you solutions that really work.

Quote:

The problem here is that on the official pages http://twitter.github.com/bootstrap/ he claims to work in all browsers, even IE7. Which, theoretically, it can be, but you need design and development around a certain mood when developing responsibly.

Answer 6

I used html5shiv in:

https://code.google.com/p/html5shiv/

It worked for me. It is also accessible with a gazebo.