Use bootstrap+font-awesome+jquery for IE7 web application
Live demo: http://binchen.org/schools/
Screenshot:
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.
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');
}