Internet Explorer CSS hack

Applying Special CSS Rules for IE6-IE8 and IE9 Without Affecting Other Browsers

It’s been a while since I blogged about this \9 CSS hack for all versions of Internet Explorer. Personally I always try to avoid hacks, but recently I had to tweak some style sheet to use special styles for IE6-IE8 and for IE9, so I remembered of this hack. Here’s how I did it:

/* first apply the \9 hack for any version of internet explorer, for example */
body
{
    background: #f00\9;
}

/* ... then override the above rule by using the CSS3 :root selector which is supported by IE9, but still use the \9 hack to filter out only IE9 */
:root body
{
    background: #ccc\9;
}

By using the above CSS you can have special styles, which are the same for Internet Explorer 6-8 and other rules for Internet Explorer 9 without affecting other browsers.

Advertisements

CSS Hack for Internet Explorer 8

Notwithstanding the improvements in the CSS support in Internet Explorer 8, there may be cases when a CSS hack for that particular browser is necessary. Here is one that works in IE8 Standards Compliance Mode:

.classnameOrElement
{
 
color /*\**/: blue\9
}

And another one that will be applied in all IE versions:

.classnameOrElement
{
 color: blue\9
}

An Exotic CSS Hack for Internet Explorer

Here is a less known and rather exotic CSS hack, visible for Internet Explorer based on a rendering bug. Unfortunately, it is visible both in versions 6 and 7, but still it can be useful as a last resort for styling.

And here it comes:

h1
{
 color: green;
.color: red;
}

Internet Explorer 6 and 7 will render <h1>...</h1> in red, while all other browsers will disregard the dot-prefixed property.