CSS浏览器兼容性，最完整处理方案 _浏览器兼容

前端是一个让人又爱又恨的职业，爱,是因为技术更新快，发展道路宽阔；恨的是需要学习、掌握的东西太多太多，永远学不完，正如俗话说：活到老，学到老；但更让人头疼的是，还要面临各种适配、兼容性问题。
网上对适配、兼容性问题都有相关解答，但一直以来都是头痛医头脚痛医脚，没有进行系统的梳理，整个思路和方向全是混乱的，所以最近整理了一份css浏览器兼容性的常见解决思路和方案，分享给大家，一起进步。
浏览器兼容性问题原因其实就是一句话，浏览器厂商太多。关键是不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。

文章插图

各浏览器市场表现浏览器种类这么多，不可能每一个都要去兼容，所以对于用户量一般的产品，把主流浏览器的适配做好，就已经很不错啦。
根据世界市场权威调查机构NetMarketShare公布的2018年10月各浏览器市场占有率，可以看出Chrome的占有率达到了66.43% 。

文章插图

但根据百度流量研究院提供的2018年11月至2019年1月的数据可以看出，IE系仍然占有很大比重，兼容处理工作还需继续。

文章插图

解决思路和方案（重点）这里我们不会去关注太多细节问题，比如哪个css样式需要我们去兼容等，主要从4个方面讨论一下大的解决思路，分别是：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件。

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); 大家想一下，如果每个CSS属性写这么一堆兼容性代码，那无疑是对生命折磨，到后面就会讲如何通过自动化插件来处理。

CSS hack

【CSS浏览器兼容性，最完整处理方案】除了以上的默认样式覆盖及私有属性添加，有时我们还需要针对不同的浏览器甚至不同版本编写特定的CSS样式，这一过程就叫做CSS hack!
CSS hack的写法大致可以归纳为以下几种：条件hack、属性级hack、选择符级hack 。
条件hack：主要针对IE浏览器进行一些特殊的设置