CSS各浏览器兼容hack方法

各浏览器CSS hack兼容表:

 
IE6
IE7
IE8
Firefox
Chrome
Safari
!important
 
Y
 
Y
   
_
Y
         
*
Y
Y
       
*+
 
Y
       
9
Y
Y
Y
     
 
   
Y
     
nth-of-type(1)
       
Y
Y

一.适用于IE6的hack 
1.*html {} 
这应该是使用最多的IE6 hack。 
*html .demo-1{ 
background-color:#0CF; 

在IE6下你将看到一个蓝色背景的层。 
2. .demo-2{_background-color:#0CF;} 
在属性名前加一个“_”,与第一种方法相比,创建更为快速,缺点是扩展性差。 
.demo-2{ 
_background-color:#0CF; 
_color:red; 

3. .demo-3{_background-color/**/:/**/ #0CF;} 
这个hack非常少用,算是一个颇为偏门的hack,在属性和值中插入二个空注释。 
.demo-3{ 
_background-color/**/:/**/#0CF; 

二.适用于IE7的hack 
4. *+html {} 
最常用的IE7 hack,与IE6的*html很相似。 
*+html .demo-4{ 
background-color:#0CF; 

5. *:first-child+html {} 
不常用的IE7 hack,跟写法上过于繁琐有直接关系。 
*:first-child+html .demo-5{ 
background-color:#0CF; 

6. .demo-6{*background-color:#0CF;} 
IE7及以下都支持,在属性前加“*”。 
.demo-6{ 
*background-color:#0CF; 

三.适用于IE8的hack 
7. .demo-7{background-color:#0CF\0/;} 
有点诡异的hack,在属性值后面跟上\0/; 
.demo-7{background-color:#0CF\0/;} 
四.适用于google chorme浏览器的hack 
  
body:nth-of-type(1) .megamenu{margin-top:12px;} 
  
  
————————————汇总—————————————– 
#test{ 
color:red; /* 所有瀏覽器都支持 */ 
color:red !important;/* Firefox、IE7支持 */ 
_color:red; /* IE6支持 */ 
*color:red; /* IE6、IE7支持 */ 
*+color:red; /* IE7支持 */ 
color:red\9; /* IE6、IE7、IE8支持 */ 
color:red\0; /* IE8支持 */ 

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

未经允许不得转载:Windy's Blog » CSS各浏览器兼容hack方法

赞 (0)