CSS \9 in width property

Question

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 1

It's a css hack for IE9 & below version

write like this:

width: 500px\9;

Read this article http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Answer 2

In IE9 to set the width property you just add this hack.

e.g

.align {
    float:left;
    margin:5px;
    background-color:blue;
    width:65px;
    width:\9 !important;
}

Answer 3

\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.

http://webdesignandsuch.com/ie9-specific-css-hack/

---

EDIT:

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

Answer 4

CSS Hack for IE9

/* Hack CSS IE9 */
.csshackie9 {color:#f00\9\0\;}