css 兼容性

兼容性：

更多关于css3的属性兼容参考

IE9+,Firefox4+,Chrome5+,Safari5+,Opera01.5+,iOS Safari4+,Android Browser2.2+ ,Android Chrome18+

兼容方法：

举例：

低版本的chrome:-webkit-border-radius:10px;
低版本的firefox:-moz-border-radius:10px;
IE6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色

Mozilla 内核 css前缀-moz;
WebKit 内核 css前缀-webkit ;
Opera 内核 css前缀 -o ;
Trident 内核 css前缀 -ms ;

 

 

介绍一下:

什么是CSS hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

css3中常用的：

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate ;

 

CSS 内部hack 语法是这样的 selector{<hack>?property:value<hack>?;} ，上面代码所示的是在属性名称之前的hack，当然还有这样的

*background-color:green;

属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令

 

-background-color:green;

属性前面有个“-”这样的只有IE6识别，还有些在后面的hack

 

 

background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别

 

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*
+
-
!important
\9
\0
\9\0

 

background-color:green\9;

比如上边的那样

 

background-color:green;
+background-color:green;
_background-color:green;

 

 

选择器hack

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*html
*+html
:root

 

针对IE9的hack可以这么写

:root .test
{
    background-color:green;
}

 

HTML头部引用

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

 

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序

 

先一般，再特殊

background-color:blue; /*所有浏览器*/
background-color:red\9;/*所有的ie*/
background-color:yellow\0; /* ie8+*/
+background-color:pink; /*+ ie7*/