Web Development

Making Bootstrap Compatible with IE

The front-end of my previous websites was built entirely with Bootstrap.

I usually use Chrome, but one day I checked my website on IE6 running on XP, and it was a disaster. I had completely forgotten about browser compatibility. So I tested on:

Chrome, Opera, Firefox, IE 5.5-10 [using IE Tester]

The main issues were with IE, so I started looking for solutions:

  1. http://www.jqueryba.com/1194.html

    Add:

    1
2
3

    <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    Or directly add:

    1
2
3
4
5

    <!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

    Then:

    1

    header, footer, article, section, nav, menu, hgroup {display: block;}

    1
2
3
4
5
6
7
8
9

    <script type="text/javascript">
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
</script>

    The results weren’t great though – many nav elements and alignments were off.

  2. BSIE [Bootstrap IE] http://www.bootcss.com/p/bsie/ This is an open-source library built on top of Bootstrap. The demo looked great, but due to legacy reasons, my site was already built and making changes was too difficult, so I had to give up.

  3. The final solution: just embed two JS files.

    html5shiv.js + respond.js

    Yes, just these two JS files. At least IE7 and above now display properly. There are still some minor issues like rounded corners, but the nav, grid layout, and overall appearance work well. Very satisfying.