css兼容性处理方案首先是对兼容性的一个认识。不同浏览器之间的兼容性+同一浏览器不同版本之间的兼容性。解决方案主要有四种：1、浏览器CSS样式初始化。padding、margin、line-height全局初始化，统一不同浏览器的差异。示例：*{保证金：0；填充：0；}html{行高：1.15；-webkit-text-size-adjust:100%;}2浏览器私有属性通常会加一些前缀，比如：-webkit-forchrome,safari-moz-forfirefox-ms-forIE-o-foropera例如：-webkit-变换：旋转（-3deg）；/*对于Chrome/Safari*/-moz-transform:rotate(-3deg);/*对于Firefox*/-ms-transform:rotate(-3deg);/*对于IE*/-o-transform:rotate(-3deg);/*对于Opera*/转换：旋转（-3deg）；3CSShack有时我们需要为不同的浏览器或不同的版本编写特定的CSS样式。这种为不同浏览器/不同版本编写相应的CSS代码的过程称为CSShack。CSShack大致可分为三种类型：条件hack、属性级hack和选择器级hack。3.1条件hack只能被IE7识别IE7及以上版本可以识别3.2属性级别hack_：选择IE6及以下。也可以使用连接线（破折号）(-)。为了避免与一些带有破折号的属性混淆，使用下划线（_）更为合适。*：选择IE7及以下版本。如：(+)和(#)都可以，但是业界对(*)的认识比较高9：选择IE6+0：选择IE8+和Opera15以下的浏览器例子：比如在不同的IE中设置不同的颜色浏览器，注意顺序：低版本的兼容性写在最后。.test{颜色：#090\9;/*对于IE8+*/*color:#f00;/*对于IE7和更早版本*/_color:#ff0;/*ForIE6andearlier*/}3.3selectorlevelhack*html*prefixisonlyvalidforIE6*+html*+prefixisonlyvalidforIE7@mediascreen\9{...}onlyvalidforIE6/7@media\0screen{body{背景：红色；}}仅对IE8有效@media\0screen\,screen\9{body{background:blue;}}只对IE6/7/8有效@mediascreen\0{body{background:green;}}仅对IE8/9/10@mediascreen和(min-width:0\0){body{background:gray;}}仅对IE9/10@mediascreen和(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;有效}}仅对IE10有效示例：*html.test{color:#090;}/*对于IE6和更早的版本*/*+html.test{color:#ff0;}/*ForIE7*/4自动化插件Autoprefixer是一个自动管理浏览器前缀的插件。它可以解析CSS文件并为CSS内容添加浏览器前缀。它使用来自CanIUse（caniuse网站）的数据来确定需要哪些前缀。.在资源构建工具（如Grunt）中加入Autoprefixe后，就可以完全忘记CSS前缀，按照最新的W3C规范正常编写CSS即可。如果项目需要支持旧版浏览器，可以修改浏览器参数设置。//我们写的代码div{transform:rotate(30deg);}//自动补全的代码，具体补全由浏览器版本决定是否兼容，可以设置div{-ms-transform:rotate(30度）；-webkit变换：旋转（30度）；-o-变换：旋转（30度）；-moz变换：旋转（30度）；transform:rotate(30deg);}参考文章：CSSBrowserCompatibility4解决方案
