Bootstrap 3 with respond.js and html5shiv.js still not working on IE8

Mattias picture Mattias · Sep 18, 2013 · Viewed 13.1k times · Source

I have a website which is running Bootstrap 3 and working perfectly on all browsers except IE8. It's the problem where the media queries aren't supported, so the content stretches as if it was run on a mobile device.

I have tried including respond.js, html5shiv.js and the html5shim from Google. Also the meta http-equiv-tag is included. The media queries still don't seem to work.

Also, I know respond.js doesn't work locally because of it's xmlHttpRequest-thingy, but this site is running on a webserver.

I've also made sure both respond.js and html5shiv.js are found and the links are not broken.

Any ideas?

Answer

Mattias picture Mattias · Sep 20, 2013

Okay so the non-responsive css file wasn't exactly what we were looking for. However, we found the problem:

IE8 doesn't seem to like the @import-property.

We used a global css file which imported the necessary styles. When moving all stylesheets to the header and including them with a normal link-tag, it works.

It's weird though, the regular bootstrap styling (buttons, backgrounds and such) got imported properly. The grid system was not. I guess Internet Explorer works in mysterious and retarded ways.