首页 > 开发 > CSS > 正文

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

2024-07-11 08:39:56
字体:
来源:转载
供稿:网友

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

各浏览器CSS hack兼容表:

IE6IE7IE8FirefoxChromeSafari
!important Y Y  
_Y     
*YY    
*+ Y    
/9YYY   
/0  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:red/9; /* IE6、IE7、IE8支持 */
color:red/0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例:


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


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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表