解决前段开发中遇到的浏览器兼容问题

经过查阅资料与对比。以下两种方法比较实用（两种可结合使用）

这里我们不会去关注太多细节问题， 比如哪个css样式需要我们去兼容等，主要从4个方面讨论一下大的解决思路，分别是：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件。
1、CSS初始化
前端的小伙伴一定遇到过因为默认样式导致的错乱问题，而且每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化（覆盖默认样式）。相信很多朋友也都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0。

{
margin: 0;
padding: 0;
}
关于浏览器CSS样式初始化，经验不丰富的话，尤其对于刚入门的小白，可能也不知道该初始化什么，这里推荐一个库给大家，Normalize.css，github star数量接近4万，自行选取展示其中几个样式设置，如下：
html {
line-height: 1.15; / Correct the line height in all browsers /
-webkit-text-size-adjust: 100%; / Prevent adjustments of font size after orientation changes in iOS. /
}
body {
margin: 0;
}
a {
background-color: transparent; / Remove the gray background on active links in IE 10. /
}
img {
border-style: none; / Remove the border on images inside links in IE 10. */
}
通过CSS样式初始化，已经解决了一大部分因为浏览器默认样式导致的常规兼容性问题。但是还有浏览器的私有属性。
-webkit- ，-moz- ，-ms-等，这是我们经常在某个CSS属性前添加的一些前缀，这些就是浏览器的私有属性。

说到私有属性的出现也是因为制定HTML和CSS标准的组织W3C动作很慢。

通常，有W3C组织成员提出一个新属性，比如圆角border-radius，大家都觉得好，但W3C制定标准，要走很复杂的程序。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。为避免日后W3C公布标准时有所变化，所以加入一个私有前缀，比如-webkit-border-radius，常用的前缀有：

-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);