之所以会遇到浏览器兼容问题，主要有两个方面的原因：浏览器不按标准实现；标准自身的升级。
第一种情况，主要就是区别不同的浏览器，比如ie，chrome，firefox等。第二种情况，也很常见，越新的标准提供的功能越多越丰富，但是如果浏览器版本太旧，不支持这些新标准，就会导致兼容问题。
由上可见，我们既要兼顾浏览器不同于标准的特有实现，又要小心使用的新特性能否兼容目标浏览器要求。
一、新标准低版本
首先，忽视第一种情况，假设浏览器都是按照标准来实现的。那么我们面对的兼容问题就是：开发使用了新标准提供的属性或者语法，但是这些属性或者语法在低版本的浏览器中不支持。
CSS
低版本的浏览器没有的CSS样式，一种情况是利用脚本补丁来实现，比如：
flex属性的兼容脚本：
https://github.com/jonathantneal/flexibility
解决HTML5提出的新的元素不被IE6-8识别：
https://github.com/aFarkas/html5shiv
或者，使用modernizr检测浏览器是否支持某个属性，针对没有的属性，额外添加对应的样式，进行优雅降级。
JavaScript
如果我们使用了ES6+语法，不兼容ES6语法的浏览器就无能为力了。目前，ES5的浏览器兼容性很好，但ES6的兼容性却要十分小心。
针对这种情况，需要使用babel对ES5进行编译，但是ES6中还有一些API是ES5中没有的，光依靠编译还不足以解决兼容问题，还需要babel-polyfill打补丁。
二、浏览器特有实现
其次，考虑浏览器中有别于标准的特殊实现。
CSS
样式这块其实有一些属于历史遗留问题，这个说法主要针对IE浏览器，毕竟它的历史相对悠久。比如：IE浏览器的盒子模型和标准盒子模型不一样，浮动，选择器等。
针对IE低版本浏览器，可选择的解决方法有：
ie7/8/9.js是一系列JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。
除此之外，有些时候浏览器的实现和标准差不多，但是它们需要在特定的浏览器引擎前缀下才能正常工作。原因主要是：浏览器厂商们有时会给实验性的或者非标准的CSS属性和JavaScript API添加前缀。所以在标准没出来前的浏览器就需要使用这些浏览器引擎前缀。日常开发工作中，我们可以在CSS后处理中使用autoprefixer给样式自动添加前缀。
JavaScript
使用如jQuery这样的JS库，可以搞定有关DOM操作的兼容问题，Web库or框架会针对浏览器兼容问题做得很好。
实际开发中可能还会遇到各种其它问题，比如：
跨域（IE9不支持cors，有自己的XDomainRequest方法）：
https://www.cnblogs.com/whq920729/p/6306131.html
扩展阅读
浏览器兼容性问题解决方案·总结
https://juejin.im/post/59a3f2fe6fb9a0249471cbb4
网友评论