css兼容性处理方案
首先是对于兼容性的理解。不同浏览器之间的兼容+同一浏览器，不同版本之间的兼容。
解决方案主要有以下四种：
1 浏览器CSS样式初始化
对padding和margin，以及line-height等在全局初始化，统一不同浏览器之间的差异。
举例：
* {
margin: 0;
padding: 0;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}2 浏览器私有属性
通常会在某个CSS的属性前添加一些前缀，比如:
-webkit-代表chrome,safari
-moz-代表firefox
-ms-代表IE
-o-代表opera
举例：
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);3 CSS hack
有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。
3.1 条件hack
IE6以及IE6以下版本可识别
仅IE7可识别
IE7以及IE7以上版本可识别
3.2 属性级hack
_：选择IE6及以下。连接线(中划线)(-)亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线(_)更为合适。
*：选择IE7及以下。诸如：(+)与(#)之类的均可使用，不过业界对(*)的认知度更高
9：选择IE6+
0：选择IE8+和Opera15以下的浏览器
举例：如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后。
.test {
color: #090\9; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
}3.3 选择符级hack
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效举例：
* html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */4 自动化插件
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。
把Autoprefixe添加到资源构建工具(例如Grunt)后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。
//我们编写的代码
div {
transform: rotate(30deg);
}
//自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
