关于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等)。