I was working on a website template based on Bootstrap 3. And during the test in IE8 Compatibility Mode, I found that it did not work as desired. The responsive grid system did not work in IE 8. All columns took the whole width.
At the beginning, i thought the respond.js might not be included. but I checked the html code, and the following code was added:
<!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]-->
It says, if it is less than IE 9, include the html5shiv.js and respond.min.js.
In the bootstrap site, it clearly state that IE 8 is supported:
Internet Explorer 8 and 9
Internet Explorer 8 and 9 are also supported, however, please be aware that many CSS3 properties—e.g., rounded corners and shadows—are not supported by IE8. The placeholder attribute is also not supported in either of these versions.
In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.
Then, what is missing?
I checked the Respond website, and found this:
Respond.js doesn’t parse CSS refrenced via @import, nor does it work with media queries within style elements, as those styles can’t be re-requested for parsing.
Actually, i imported the bootstrap css as a lib in my style.css file. And that causes the respond.js not working.
To fix this issue, it is very easy, you can add the style in your header.php directly like this
<link rel="stylesheet" href="<?php get_template_directory(); ?>/css/bootstrap.min.css">
instead of import the bootstrap in your style.css.
It is always a good practice to understand rationale beneath instead of using them blindly.