为什么这个IE CSS中的拼写错误？

Question

有人可以向我解释为什么这个特定的IE黑客中的width属性拼错了吗？

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

顺便说一句，这是我看到该代码的链接： http://www.webreference.com/programming/css_gallery/3.html

Answer 1

这称为Tan hack。

• * html部分隐藏了IE 6及以下浏览器的规则。 IE 6显然认为html元素具有父元素。

• 具有反斜杠（w\idth）的规则被IE 5.0和5.5 for Windows错误地解析为不适用，违反了section 4.1.3 of the CSS2 standard。

• 正确拼写的width规则在IE 6 Windows和IE 5 Mac中被覆盖，它们没有特定的CSS解析错误。 （后来的CSS规则优先于早先的规则。）

因此，在具有触发标准模式的doctype的页面中，W3C框模型下的宽度（适用于IE 6 Windows和IE 5 Mac）低于w\idth，宽度低于传统（边框） box model（适用于IE 5 Windows）位于width。

之下

除非你需要支持IE 5（已经过时），否则这个hack是不必要的。

Answer 2

早期版本的IE（不兼容）不了解带反斜杠的属性，因此在您的示例中将宽度设置为91px。兼容的浏览器可以理解这两行，但CSS的级联性质意味着第一个值被下一个覆盖，因此它们将宽度设置为93px。

这种破解是一种克服IE中破碎的盒子模型的方法，其中元素尺寸的计算方式不同，导致布局噩梦。

Answer 3

基本上，它的工作原理是因为早期版本的IE不知道如何忽略反斜杠。他们只是说“我不认识这个属性”而忽略了整行。其他浏览器在找到理解它们所给代码的方法方面更聪明一些，例如，忽略反斜杠。

这为我们提供了一种方便（虽然不符合标准）的方式来让IE忽略一行CSS。所有浏览器都读取第一行并将宽度设置为91px。然后样式表有点说“嘿，如果你不是IE，你应该将你的宽度设置为93px。”所以更聪明的浏览器会这样做，让我们有一种方法告诉IE我们需要什么，而不会打扰所有其他浏览器的布局。