我在一个项目中发现了这样的CSS代码:

html, body { :)width: 640px;}

我已经使用CSS很长一段时间了,但我从来没有见过这个“:)”代码之前。它有什么意义吗,还是只是一个错别字?


这看起来像是针对IE7和更早版本浏览器的CSS攻击。虽然这是无效的CSS,浏览器应该忽略它,但IE7和更早的版本将解析并遵守这一规则。下面是一个实例:

CSS

body {
    background: url(background.png);
    :)background: url(why-you-little.png);
}

IE8(忽略规则)

IE7(应用规则)

注意,它不一定是一个笑脸;BrowserHacks提到:

这些字符的任意组合: ! $ & *() = % + @,。/ ' [] # ~ ?: < > | [前面的属性名称将工作于]Internet Explorer≤7


这里是GAH热狗摊的例子。


来自javascriptkit.com的一篇文章,这适用于ie7和更早的版本:

如果你在属性名前添加了一个非字母数字字符,例如星号(*),该属性将在IE中应用,而不是在其他浏览器中。

还有一个hack <= IE 8:

div {
  color: blue;      /* All browsers */
  color: purple\9;  /* IE8 and earlier */
 *color: pink;      /* IE7 and earlier */
}

但这不是一个好主意,它们不能验证。你总是可以自由地使用条件注释来针对特定版本的IE:

<!--[if lte IE 8]><link rel="stylesheet" href="ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie-6.css"><![endif]-->

但对于那些想看到真正的黑客,请打开这个页面在最新版本的IE。然后按F12键进入显影模式。在Emulation部分(ctrl+8)将文档模式更改为7,看看会发生什么。

页面中使用的属性是:)font-size: 50px;。