56

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

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
medium
  • 3,708
  • 14
  • 50
  • 63
  • 3
    Media queries which are used for triggering layout rearrangement are not supported in IE<9, twitter bootstrap is not broken – ioseb Jun 12 '12 at 14:37
  • okay thank you, that is not very clear in the documentation. – medium Jun 12 '12 at 14:53
  • 2
    I'm not sure about this but maybe you could use google chrome frame. (works on ie6 and higher) This will allow html5 in older browsers. http://www.chromium.org/developers/how-tos/chrome-frame-getting-started – DavidVdd Jun 12 '12 at 14:48
  • http://stackoverflow.com/questions/17947182/ie8-issue-with-twitter-bootstrap-3 – John Washam Sep 03 '14 at 20:04

6 Answers6

52

If you want to have better performance and your structure is not too complicated.

You can try Respond.JS

From the author:

This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)

maxisam
  • 20,632
  • 9
  • 67
  • 77
  • 1
    In order to avoid a CORS issue with Respond.js, it is critial to locally download and host the Bootstrap CSS (and related assets). – treejanitor Jul 23 '14 at 16:24
33

For supporting @media queries in IE 8 and below, check out
css3-mediaqueries-js.

css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

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

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
  • 7
    You don't always want to add polyfills to support ie7 & 8. Seems like a pretty good situation here, but realistically media queries are for supporting large format screens & mobile devices (most likely neither of which will be running ie7/8). – 1nfiniti Jun 15 '12 at 15:29
  • 3
    I had no luck after applying `css3-mediaqueries.js`. I had to change the `@media`-queries to something `@media all and (max-width: ...)` – derflocki Aug 08 '12 at 09:42
  • 3
    I was not able to get css3-mediaqueries.js working so I tried respond.js and it worked with bootstrap on IE8 – Craig McKeachie Sep 07 '12 at 17:59
  • 2
    do you simply import respond.js in the header and it works? or is there more involved to get it working...? thx – ted.strauss Sep 13 '12 at 19:41
  • but the thing is IE8 doesn't support media queries. http://caniuse.com/#feat=css-mediaqueries – noelyahan Jan 03 '13 at 05:39
2

These are the steps I took to get this working:

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

It works so get that working locally by downloading the response.js into your vendor/assets or somewhere similar.

Disable your local bootstrap and try this in your css:

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

It works!

Because I was using the cdn, I needed to download and host it locally:
http://getbootstrap.com/getting-started/#download

So, it works with these:

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

You'll also need to get rid of any @import declarations.

Rimian
  • 32,654
  • 13
  • 106
  • 109
0

I have tried all of the ways described above, and it works but so slowly. I offer the next approach. We should decompose css file that is contains @media and insert each rule in the separate file. Then we should conditionally upload each file, depending from browser screen width. All this actions will do the script cload.js. Download cload.js and read how to use it you can here

Sergey Onishchenko
  • 4,740
  • 2
  • 34
  • 43
0

You should all read this forum post.

It explains very clearly the challenges between IE and Twitter Bootstrap. It also gives you solutions that actually work.

Quote:

The problem here is that on the official pages like http://twitter.github.com/bootstrap/ it claims to work in all browsers, even IE7. Which, theoretically it can be, but you have to design and develop around a certain frame of mind when developing responsively.

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
Chris
  • 1,264
  • 3
  • 16
  • 23
-1

I used the html5shiv at:

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

This worked for me. It is also available using bower.

Josh Petitt
  • 8,633
  • 10
  • 50
  • 95