关于IE6、IE7和FF最简单的CSS hack技巧

关于CSS HACK的文章在52CSS.com中提及的也很多。CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。

FF浏览器

.test{ height:20px; background-color:orange; }

IE7浏览器

*+html .test{/*IE7*/ height:20px; background-color:blue; }

IE6浏览器

*html .test{/*IE6*/ height:20px; background-color:black; }

通过上面的CSS代码可以看出FF还是最听话的浏览器。在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html。

这里就很好记忆了，IE6加*html，而IE7加*+html，暗示加了一个版本。

通过对class、id所做的CSS HACK好处在于不用顾及前后顺序，而且便于管理和其他人员接受，还可以通过这种HACK实现类似JS浏览器版本的控制。

----------------------------------

区别不同浏览器，CSS hack写法：

区别IE6与FF： background:orange; *background:blue;

区别IE6与IE7： background:green !important; background:blue;

区别IE7与FF： background:orange; *background:green;

区别FF、IE7、IE6： background:orange; *background:green !important; *background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

2.区别IE6,IE7,IE8,FF

【区别符号】：「/9」、「*」、「_」
【示例】：

#tip {
background:blue; /*Firefox 背景变蓝色*/
background:red /9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE系列浏览器可读「/9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。