cssinternet-explorer

IE 6,7,8,9 CSS compatibility Stylesheet


Developping for all browsers, then fighting for IE compatibility is a well know step in all web developement process.

Not being a web integrator, do you know any generic compatibility stylesheet that are good to include for IE ( In my case I'm only concerned about IE7, but I'll let the question open for all version )


Solution

  • normalize.css is a good reset that addresses a lot of cross-browser issues. https://necolas.github.io/normalize.css/

    Twitter Bootstrap is good if you want pre-made components. It is IE compatible. If you decide to use Bootstrap, its reset is actually adapted from normalize.css (so you won't need both)

    HTML5 Boilerplate may also help with some best-practice markup if you're getting started from scratch: https://github.com/h5bp/html5-boilerplate

    In particular, I'd recommend using the HTML5BP conditional comments to target specific IE versions, like this:

    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    

    That means in your CSS you can address IE version specific issues with classes:

    .lt-ie8 .awesome-component { ... }
    

    Finally, I would recommend AGAINST using javascript polyfills like CSS3PIE. In my experience they just cause more hassle than they're worth, adding unnecessary markup.

    Learn a bit about graceful degradation / progressive enhancement.

    Another answer mentioned IE7.js which I believe is fine, though I can't remember how useful it is. You'll definitely need to shim missing JS functions (if you're using js) such as Array.indexOf in IE <= 8. I just found this ECMAScript5 shim which looks pretty good: https://github.com/kriskowal/es5-shim