CSS浏览器兼容性问题
1、浏览器CSS样式初始化
最简单的初始化方法就是：使用通配符（*），重置所有的初始样式。
*{margin: 0;padding: 0;}/* 10px=1rem */html {overflow-y:scroll;font-size:62.5%;}a{text-decoration:none;}a:hover { text-decoration:none; }img {border-style: none; }ul,ol,li{list-style:none;} select,input,img,select,button{vertical-align:middle;}
2、浏览器私有属性
常用的前缀有：
-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-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
keywords
if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!
version
IE浏览器版本，如6、7、8
IE10及以上版本已将条件注释特性移除，使用时需注意。
<!--[if IE]><p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style>.test{color:red;}</style><![endif]--><!--[if lt IE 9]><script src="///html5shiv/3.7.2/html5shiv.min.js"></script><script src="///respond.js/1.4.2/respond.min.js"></script><![endif]-->
这样就不一用这里一个兼容性属性，那里一个兼容性属性啦。
4、自动化插件
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
//我们编写的代码div {transform: rotate(30deg);}//自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置div {-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg);transform: rotate(30deg);
目前webpack、gulp、grunt都有相应的插件，可以自动生成兼容性代码。
