IE6、IE7、IE8、Firefox兼容性CSS HACK问题

通俗地讲：CSS Hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。 由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS Hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。  
 
1.区别IE和非IE浏览器CSS HACK代码

#divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ }

2.区别IE6,IE7,IE8,FF CSS HACK 
【区别符号】：「\9」、「*」、「_」
【示例】：

#divcss5{ 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等)。

 

3.区别IE6、IE7、Firefox (EXP 1) 
【区别符号】：「*」、「_」
【示例】：

#divcss5{ background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox

 

4.区别IE6、IE7、Firefox (EXP 2) 
【区别符号】：「*」、「!important」
【示例】：

#divcss5{ background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ *background:orange; /*IE6 背景变橘色*/ }

【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

 

5.区别IE7、Firefox 
【区别符号】：「*」、「!important」
【示例】：

#divcss5{ background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ }

【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

 

6.区别IE6、IE7 (EXP 1) 
【区别符号】：「*」、「_」
【示例】：

#tip { *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }

【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

 

7.区别IE6、IE7 (EXP 2) 
【区别符号】：「!important」
【示例】：

#divcss5{ background:black !important; /*IE7 背景变黑色*/ background:orange; /*IE6 背景变橘色*/ }

【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

 

8.区别IE6、Firefox 
【区别符号】：「_」
【示例】：

#divcss5{ background:black; /*Firefox 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }

 

【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

 

盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"} \""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

IE的if条件Hack

<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

仅IE7可识别

 

以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。

总结以下HACK书写方法: 

浏览器：仅限IE6+，FF，Safari，Chrome，Opera；（截止到2011.10.12非IE均为最新版本）。
  测试环境：windows系统;（FF : firefox; OP : opera; SA : safari; CH : chrome;  Y代表支持，N代表不支持。）

标志符	示例	IE6	IE7	IE8	IE9	FF	OP	SA	CH
*	.eq {*color:#000;}	Y	Y	N	N	N	N	N	N
_	.eq {_color:#000;}	Y	N	N	N	N	N	N	N
+	.eq {+color:#000;}	Y	Y	N	N	N	N	N	N
-	.eq {-color:#000;}	Y	N	N	N	N	N	N	N
>	.eq {>color:#000;}	Y	Y	N	N	N	N	N	N
\0	.eq {color:#000\0;}	N	N	Y	Y	N	Y	N	N
\9	.eq {color:#000\9;}	Y	Y	Y	Y	N	N	N	N
\9\0	.eq {color:#000\0;}	N	N	N\Y	Y	N	N	N	N
:root .xx{xxx:xxx\9;}	:root .eq {color:#a00\9;}	N	N	N	Y	N	N	N	N
*+	.eq {*+color:#000;}	Y	Y	N	N	N	N	N	N
*-	.eq {*-color:#000;}	Y	N	N	N	N	N	N	N
*html	*html .eq {color:#000;}	Y	N	N	N	N	N	N	N
*+html	*+html .eq {color:#000;}	N	Y	N	N	N	N	N	N
html*	html* .eq {color:#000;}	Y	Y	N	N	N	N	N	N
[;	.eq {color:red;[;color:blue;}	Y	Y	N	N	N	N	Y	Y
html>body	html>body .eq {color:blue;}	N	Y	Y	Y	Y	Y	Y	Y
html>/**/body	html>/**/body .eq {color:blue;}	N	N	Y	Y	Y	Y	Y	Y
html/**/>body	html/**/>body .eq {color:blue;}	N	Y	Y	Y	Y	Y	Y	Y
@media all and (min-width:0px){}	@media all and (min-width:0px){.eq {color:#000;}}	N	N	N	Y	Y	Y	Y	Y
*:first-child+html	*:first-child+html .eq {color:blue;}	N	Y	N	N	N	N	N	N
*:first-child+html{} *html	*:first-child+html{} *html .eq {color:blue;}	Y	N	N	N	N	N	N	N
@-moz-document url-prefix(){}	@-moz-document url-prefix(){ .eq {color:blue;}}	N	N	N	N	Y	N	N	N
@media screen and (-webkit-min-device-pixel-ratio:0){}	@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}	N	N	N	N	N	N	Y	Y
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}	N	N	N	N	N	Y	N	N
body:nth-of-type(1)	body:nth-of-type(1) .eq {color:blue;}	N	N	N	Y	Y	Y	Y	Y

 

注意事项：

1、由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。
2、[;此种方式会影响后续样式，不可取。
3、\9\0并非对所有属性都能区分IE8和IE9。比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。
4、当同时出现\0，*，_，时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。

书写方法一：

 

IE6 hack
　　_background-color:#CDCDCD; /* ie 6*/
IE7 hack
　　*background-color:#dddd00; /* ie 7*/
IE8 hack
　　background-color:red \0; /* ie 8/9*/
IE9 hack
　　background-color:blue \9\0;
火狐，遨游，及其它高级浏览器通用
　　background-color:red!important;
注意写hack的顺序，其中：
background-color:red\0;IE8和IE9都支持；background-color:blue\9\0; 仅IE9支持；
另外，background-color:#eeeeee\9;的HACK支持IE6-IE8，但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。

 

书写方法二：

 

#element {color:orange;}
#element {*color: white; }  /* IE6+7, doesn't work in IE8/9 as IE7 */
#element {_color: red; }  /* IE6 */
#element {color: green\0/IE8+9; }  /* IE8+9  */
:root #element { color:pink \0/IE9; }  /* IE9 */

 

IE9 和 IE8 以及其他版本的区别说明

background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，最新版opera也认识，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-　color:purple\0;}，这个，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的
遇到的问题：

问题一：
在谷歌下： 

在IE8下：

 

解决方法：给input设置line-height:30px\9（all IE）
line-height:30px\0（IE8+）

陆续更新中。。。。