这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：
在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面的知识，不过主要处理的还是HTML、CSS、JavaScript。个人认为兼容性的问题也是对这三个方面进行处理。
首先，是html方面兼容性的处理，大家都知道，虽然有一个W3c标准的存在去规范html、xml/xhtml/css/javaScript/dom的标准，但是这只是个标准，真正体现出效果的是浏览器，而浏览器却有很多种，firefox/chrome/ie等等，每个浏览器又有不同的版本，不同浏览器不同版本因为浏览器本身渲染引擎的不同，在对于w3c标准的支持版本不同造就了一大堆的兼用性问题。对于html的兼容性问题，这里只讲两个处理方案：
1、使用样式重置css文件解决相同html标签在不同浏览器或者相同浏览器不同版本上渲染不同的兼容性问题。（个人推荐normalize.css）,当然这只供参考，样式重置要适应所在的项目风格，公司的开发规范要求等进行定制，所以要看具体要求，不过大致的重置样式都差不多，无非就是对padding,margin、字体属性等一些进行重置，具体大家可以去normalize.css查看里面的css样式。
2、在网页的顶部加上 doctype （文档类型）标签声明。这里涉及一个盒子模型的问题，大家知道，ie是特立独行的，在盒子模型上，ie的处理也不同，在ie中标签的width,height属性是包括padding和border的。当没有加上doctype时，每个浏览器都按照它自己的方式来渲染标签，这就会造成兼用性问题，而加上之后，浏览器会按照w3c标准盒子模型渲染标签。
再者是css兼用性问题，reset重置样式只解决了一些比较简单的样式问题，而类似于双边距、最小高度等问题，还需要开发者在各自的项目中进行对应的处理，这里还是总结的比较全面的，有兴趣朋友可以看一下（https://zhuanlan.zhihu.com/p/...）。
最后，就是JavaScript的兼容性问题，由于浏览器的发展及引擎不同，浏览器所自带的api也会不同，这就引起了JavaScript的兼用性问题，在引用对象属性或者方法时需要进行客户端检测，就是检测当前浏览器所处系统、所支持的语法、所具有的特殊性能。包括能力检测、怪癖检测和用户代理检测三种，个人比较推崇能力检测：
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。能力检测需要注意两点：
1、先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件；
2、必须测试实际要是用到的特性；这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻~
原文地址：https://www.cnblogs.com/homehtml/p/12217534.html