CSS: clean IE8 css hack

[Kevin]

The recently released Internet Explorer 8 has a bug that require coders to alter css only for IE8.

The bug is 'Multiple Type ID selector statement is incorrectly ignored', which means to make style work with all browsers except for IE8, all designers have to do is add selector that IE8 considers invalid.

So here is a clean IE8 hack:

Code: Select all

div.test { color: red; }
div.test, [color=#FF0000]#ie8#fix[/color] { color: blue; }

This code will set color to blue in all browsers, except for IE8, in IE8 it will be red.

How it works: IE8 thinks that #ie8#fix is an invalid selector and ignores everything from following { to matching }


Another example. The part highlighted is the code that IE8 sees:

Code: Select all

[color=#FF0000]body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background-color: white;
  color: black; /* for IE8 */
}[/color]
body, #ie8#fix {
  color: #444; /* for all browsers other than IE8 */
}

IE8 was released a while ago, but there isn't any mentions of similar IE8 css hack on the web, so this post might help designers.

This was tested with quite a lot of browsers (including many ancient browsers) on computers and on browsershots, it works perfectly and doesn't affect any browsers other than IE8.