bootstrap doesn't work in Internet Explorer 8

Question

I am currently working on a static website project, which is using html5, css3 and the bootstrap framework. In Firefox everything looks great, but in Internet Explorer 8 the site is totally damaged.

Two things are not working properly:

The main menu is not available
the teaser boxes are falling out of the layout.

I have already tested the following standard failures:

website is running in compatibility mode for Internet Explorer
HTML5shiv.js and respond.js are stored on my own server and not loaded via cdn
I have set alerts to check that all scripts are running
HTML is valid
Site run in Standards mode and not quirks mode

I have tried to find out what is happening with the site with these tools:

IE debugger
additionally check it with IETester
Firebug

Do you have any suggestions?

My project can be viewed here.

You should add `html5shiv` first of all i think for IE browsers and **change the compatibility mode to Default IE8 mode.** — Jai, Jul 03 '14 at 10:49
Compatibility mode is probably causing the browser to load in IE7 mode. Check that your browser emulation settings point to IE8 via developer tools. — athms, Jul 03 '14 at 10:50
@Deceiver they are loading html5shiv.js if the browser is lower than IE8 — Dr.Avalanche, Jul 03 '14 at 10:55
@Nickname Do you experience the same behavior on any other Bootstrap powered website? — Yannick Blondeau, Jul 03 '14 at 11:14
@Jai html5shiv is loaded at first of all, but it doesn't help. — Nickname, Jul 03 '14 at 11:16
@YannickBlondeau I testet bootstrap examples and they work normal and an other bootstrap project of mine is also working normal. — Nickname, Jul 03 '14 at 11:20
Do you know if your site makes IE to get into quirks mode? You could have a look [here](http://stackoverflow.com/a/627124/1374267) to figure this out... — Yannick Blondeau, Jul 03 '14 at 11:27
@YannickBlondeau I did an live update and the site in standards mode. — Nickname, Jul 03 '14 at 11:30

score 0 · Accepted Answer · answered Jul 08 '14 at 16:51

I solved the two bugs by myself. I solved the first issue "The main menu is not available" with an additional css file for IE through fixing the z-index in combination with postion absolute.

<!--[if lt IE 9]>
    <link href="css/ie8fix.css" rel="stylesheet">
<![endif]-->

CSS content for ie8fix.css:

.nav{position: absolute; z-index:999;}

The second issue was not really a bug, because one box where higher then all others and that was the reason why the box fall out of the design. So I correct the height value (in my case: delete a html break) and it works fine now.

bootstrap doesn't work in Internet Explorer 8

1 Answers1