这篇文章有些年头了,可能相关技术已经不再适用,请谨慎使用!

一、前面的唠叨

CSS hack这个东东可以说是老掉牙的东西,我是不会再放到锅里炒的。之所以写这篇文章,更主要的是介绍一个CSS hack – “\9″ hack,总之,在我的印象中,这个hack不常用,是适用范围问题,还是确实大家不了解我就不知道了。我最早见到此hack是在新浪博客的CSS文件中,而且这个”\9″ hack可以说犹如泛滥,水漫金山寺般的使用,见下面的截图(chrome查找结果截图):

新浪博客CSS文件

当时并不知道此hack的作用对象,今天偶然又看到此属性,于是简单研究之,发现这是个针对IE浏览器的hack,于是决定写下这篇笔记式的文章,算是一个简单知识点的累积。

二、IE8以及以下版本浏览器

对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack。如下代码:

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
}

说明:使用如上所示,在分号之前属性时候添加”\9″就可以了,为什么添加”\9″可以区分目前的IE浏览器和其他浏览器我是不知道的,这里只能使用”\9″,像是”\8″或是”\ie”都是无效的,这个还是比较有趣的。

三、IE7以及以下版本浏览器

这个知道的人应该很多,也是很基本的,就是使用”*”号了,如下示例代码:

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
    *color:green; /*IE7及其以下版本浏览器*/
}

四、IE6浏览器

就本文而言,使用下划线”_”区分IE6浏览器是最好的选择,如下代码:

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
    *color:green; /*IE7及其以下版本浏览器*/
    _color:purple; /*IE6浏览器*/
}

此demo在各个浏览器下的表现如下图所示:

Firefox下的截图 张鑫旭-鑫空间-鑫生活
IE6浏览器下截图 张鑫旭-鑫空间-鑫生活 IE7浏览器下截图 张鑫旭-鑫空间-鑫生活 IE8浏览器下的截图 张鑫旭-鑫空间-鑫生活