Use bootstrap+font-awesome+jquery for IE7 web application

  |   Source

Live demo: http://binchen.org/schools/

Screenshot: e86f11a6-733c-11e4-8312-a6c8ad2b17be.png

1 Environment

  • Bootstrap 2.3.2
  • font-awesome 3.2.1
  • JQuery 1.8.2

I only use the grid layout from bootstrap and minimum API from jQuery.

2 Notes

  • IE7 does not support media query. So I abandon "mobile first" strategy, new strategy is "IE7 first".
  • IE7 does not support inline-block properly, I need below css code hack:
.myclass {
  display: inline-block;
  /* ie7*/
  *display: inline;
  zoom: 1;
}
  • bootstrap's row-fluid has issues in IE7. I use row-fluid in this case, but have to hard code the row width sometimes.
  • add below code into javascript so that I can hack IE7-only css code:
if($.browser.msie && parseFloat($.browser.version) < 8){
  that.ie7 = true;
  $('body').addClass('ie7');
}

Comments powered by Disqus