前端是一个让人又爱又恨的职业。 他们喜欢它，因为技术更新快，发展道路广阔； 他们讨厌它，因为有太多的东西需要学习和掌握，而且永远无法完成。 俗话说：活到老。 ，边走边学； 但更麻烦的是，你仍然要面临各种适配和兼容性问题。
网上有适配、兼容问题的相关解答，但一直只是解决头疼、颈椎病的办法，没有进行系统的梳理。 整个思路和方向都比较混乱，所以最近整理了一个CSS浏览器常见的解决思路和兼容性的解决方案，分享给大家，共同进步。
浏览器兼容性问题
其实一句话，浏览器厂商太多了。 关键是不同厂家，甚至同一厂家的不同版本，对同一段CSS的解析效果不一致，从而导致页面显示效果不一致，出现兼容性问题。
各浏览器的市场表现
浏览器的类型如此之多，不可能与每一种都兼容。 因此，对于用户数量一般的产品来说，能够很好地适配主流浏览器就已经很好了。
根据全球权威市场研究机构公布的2018年10月各浏览器市场份额可以看出，市场份额达到66.43%。
但根据百度流量研究院提供的2018年11月至2019年1月的数据可以看出，IE系统仍占较大比例，兼容性处理工作还需继续。
解决思路和方案（要点）
这里我们不会关注太多的细节，比如我们需要兼容哪些CSS样式。 我们主要从浏览器CSS样式初始化、浏览器私有属性、CSS hack语法四个方面来讨论大的解决思路。 和自动化插件。
CSS 初始化
前端朋友一定遇到过默认样式带来的混乱问题，而每个浏览器默认的CSS样式都不同，所以最简单有效的办法就是初始化它们（覆盖默认样式）。 相信很多朋友也写过这样的代码。 在启动所有CSS之前，将marin和0都设置为0。
*{
margin: 0;
padding: 0;
}关于浏览器CSS样式初始化，如果你没有经验，尤其是新手，你可能不知道要初始化什么。 这里给大家推荐一个库，.css，有近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样式初始化，解决了大部分浏览器默认样式导致的常见兼容性问题。 接下来我们看一下浏览器的私有属性。
浏览器私有属性
-- 、 -moz- 、 -ms- 等。这些是我们经常在某个 CSS 属性之前添加的一些前缀。 这些是浏览器的私有属性。
说起私有属性的出现，也是因为制定HTML和CSS标准的组织W3C进展非常缓慢。
通常，当W3C组织的成员提出一个新的属性，比如圆角时，大家都认为很好，但W3C需要一个非常复杂的过程来制定标准。 浏览器供应商的营销计划很紧张。 如果某个属性足够成熟，浏览器就会添加支持。 为了避免将来W3C发布标准时发生变化，添加了私有前缀，例如---。 常用的前缀有：
一定要注意书写顺序。 把兼容性写在前面，标准写在最后。
-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 黑客
除了上面的默认样式覆盖和私有属性添加之外，有时我们还需要为不同的浏览器甚至不同的版本编写特定的CSS样式。 这个过程称为 CSS hack！
CSS hacks的写法大致可以归纳为以下几类：条件级hacks、属性级hacks、选择器级hacks。
hack：主要对IE浏览器进行一些特殊设置
关键词
if后面的条件共有6种选择方式：是否、大于、大于等于、小于、小于等于、非指定版本
是否：指定是IE还是某个版本的IE。关键字：空
大于：选择大于指定版本的 IE 版本。 关键字：gt（比）
大于或等于：选择大于或等于指定版本的IE版本。 关键字：gte（大于或等于）
小于：选择小于指定版本的 IE 版本。 关键字：lt（小于）
小于或等于：选择小于或等于指定版本的IE版本。 关键字：lte（小于或等于）
非指定版本：选择除指定版本之外的所有IE版本。 关键词： !
版本
IE浏览器版本，如6、7、8等，但IE10及以上版本已经取消了条件注释功能，使用时请注意。
属性 hack：在 CSS 样式属性名前添加一些只能被特定浏览器识别的 hack 前缀。
selector{?property:value?;} _：选择IE6及以下版本。也可以使用连接线（破折号）（-）。 为了避免与某些带下划线的属性混淆，使用下划线（_）更为合适。
*：选择IE7及以下版本。如：(+)、(#)都可以使用，但业界对(*)的认知度较高
\9：选择IE6+
\0：选择IE8+及以下浏览器
注意顺序：低版本的兼容性放在最后。
.test {
color: #090\9; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
}选择器级黑客：对于页面性能不一致或需要特殊处理的浏览器，黑客是通过在CSS选择器前面添加一些只有某些浏览器才能识别的前缀来完成的。
selector{ sRules } *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 */写到这里，不得不说前端开发太难了~~
花大力气解决这些兼容性问题不会给我们带来任何重大的技术改进。 无非就是给各个浏览器厂商补坑而已。 随着时间的推移和技术的更新，现在我们应该思考如何以最小的努力解决CSS兼容性问题。 接下来，自动化插件就可以上来了，我们终于可以从繁重的兼容性处理中解脱出来了。
自动化插件
它是一个自动管理浏览器前缀的插件。 它可以解析 CSS 文件并向 CSS 内容添加浏览器前缀。
添加到资源构建工具（比如）之后，你就可以完全忘记以前的事情了，只需要按照最新的W3C规范正常编写CSS即可，剩下的工作就交给插件了。 另外，如果项目需要支持较旧的浏览器，可以修改参数设置。
//我们编写的代码
div {
transform: rotate(30deg);
}
//自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}目前gulp和grunt都有相应的插件。 赶快行动吧，别让 CSS 兼容性浪费你的时间！
由于技术限制，如果您有任何疑问，可以在下方留言讨论。 如果你想了解更多前端技术和精彩文章，可以关注同名公众号“易果闲”。别着急，慢慢来，小果会和你一起成长
