Why the misspelling in this IE CSS hack?

Can anybody explain to me why the width attribute in this particular IE hack is misspelled?

* html #container a.slided {
    width:91px;
    w\idth:93px;
    }

btw, here's the link from where I've seen that code: http://www.webreference.com/pro开发者_开发问答gramming/css_gallery/3.html

---

This is called the Tan hack.

• The * html part hides the rule from browsers other than IE 6 and below. IE 6 apparently thinks that the html element has a parent.

• The rule having the backslash (w\idth) is incorrectly parsed by IE 5.0 and 5.5 for Windows as inapplicable, in violation of section 4.1.3 of the CSS2 standard.

• The correctly spelled width rule is overridden in IE 6 Windows and IE 5 Mac, which do not have that particular CSS parsing bug. (Later CSS rules take precedence over earlier ones.)

Thus, in a page having a doctype that triggers standards mode, the width under the W3C box model (for IE 6 Windows and IE 5 Mac) goes under w\idth, and the width under the traditional (border) box model (for IE 5 Windows) goes under width.

Unless you need to support IE 5 (long obsolete), this hack is unnecessary.

---

Early versions of IE (being non-compliant) didn't understand properties with backslashes, hence in your example would set the width to be 91px. Compliant browsers would understand both lines, but the cascading nature of CSS meant the first value was overridden by the next, so they set the width to be 93px.

This hack was a way of overcoming the broken box model in IE where element dimensions were computed differently, causing layout nightmares.

---

Basically, it works because early versions of IE don't know how to ignore backslashes. They just say "I don't recognise this attribute" and ignore the whole line. Other browsers are a bit smarter about finding ways to understand the code they are given, for example, ignoring backslashes.

This gives us a convenient (although not standards compliant) way to get IE to ignore a line of CSS. All browsers read the first line and set the width to 91px. Then the stylesheet kinda says "Hey, if you're not IE, you should set your width to 93px." So smarter browsers will do that, giving us a way to tell IE what we need to, without disturbing all the other browsers' layouts.