CSS \9 in width property

css width css-hack

well actually · Nov 4, 2011 · Viewed 77.2k times · Source

What is the meaning of this? I am guessing it is a browser hack, but I have not been able to find what exactly it does.

width: 500px\9;

What is the significance of \9?

Answer

\9 is a "CSS hack" specific to Internet Explorer 7, 8, & 9.

This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9.

In your example,

width: 500px\9; means that a width of 500 pixels (same result as width: 500px;) will only be applied while using IE 7, 8, & 9.

All other browsers will ignore width: 500px\9; entirely, and therefore not apply width: 500px; to the element at all.

If your CSS looked like this...

#myElement {
    width: 300px;
    width: 500px\9;
}

The result would be #myElement 500 pixels wide in IE 7, 8, & 9, while in all other browsers, #myElement would be 300 pixels wide.

EDIT:

This answer was written in 2011. It should now be noted that this hack also works in IE 10.