Admit it. Browser specific CSS hacks saved your sanity quite a few times. Especially dealing with that thing Microsoft dares to call browser! Yeah, I am looking at you IE6/7/8. Anyway, I’ve thrown together couple of examples of CSS rules, that helps you target different version of Internet Explorer.

Browser specific CSS

Note: This may not a complete list of possible hacks. I just picked ones, that proved to be most useful.

.hackedElement {
background: #fff; /* for Life, the Universe and Everything */
background: #eee\9; /* IE 9 and below */
background: #ddd\0/; /* IE 8 only - might not work with all attributes (lovely, isn't it?) */
*background: #ccc; /* IE 7 and below */
_background: #bbb; /* IE 6 and below */
_bac\kground: #aaa; /* IE 6 only */
}

/*
asterisk attribute usually works for both IE7 and IE6,
however selector of direct child ">" is not supported by IE6,
so CSS below gets rendered only by IE7
(note: missing parent tag before ">" is automatically substituted by "*")
*/

> body .hackedElement {
*background: #ccc; /* only IE 7 */
}

Asking yourself who, in the world, could invent such hacks and even implement them into IEs? Well, I can just say, that not all of us had luck of having a loving mother.

Conditional comments

Old school.

More about conditional comments

Microsoft decided to drop this in upcoming Internet Explorer 10. You can read full article here and don’t be ashamed of crying.

Epilogue and teaser

Personally, I don’t like any browser specific css/html code. It just gets messy in bigger projects. I usually try to find a solution, that works for each browser. So remember: Be used only as last resort, browser specific css hacks should.

Saying you solved IEs? Having headache with Chrome or FF? Read this!