IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

2020-05-15 07:59:07易采站长站整理

不同的浏览器对CSS的解释都有一点出入,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题:
• 在属性前加下划线(_),那么此属性只会被IE6解释
• 在属性前加星号(*),此属性只会被IE7解释
• 在属性值后面加"9",表示此属性只会被IE8解释

各浏览器CSS hack兼容表:

IE6IE7IE8FirefoxChromeSafari
!important Y Y  
_Y     
*YY    
*+ Y    
9YYY   
  Y   
nth-of-type(1)    YY


#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red9; /* IE6、IE7、IE8支持 */
color:red; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例:


.test{
color:#000000;
color:#0000FF;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}


#menu { line-height: 23px; }/* firefox 浏览器实行这句定义 */