前端兼容问题出现的原因
何为操作系统？操作系统（Operating System）是管理和控制计算机硬件与软件资源的计算机程序。是的，任何的应用软件必须在操作系统的支持下运行。
大家会疑问？为什么我要讲操作系统？你猜！
其实，我只想表述我自己的一个观点，“Web浏览器是Web应用的操作系统”。这句话来源于JavaScript权威指南。
正因为Web浏览器（IE、Mozilla、Apple、Google、360浏览器、QQ浏览器）的多样性，才出现了所谓的兼容性问题。
编写一个JavaScript程序并能正确运行在这么多平台之上，的确是一种挑战。
前端兼容性主要有哪些问题
软件更新；在web平台的发展中，一个标准规范会倡导一个新的特性或API。是的，浏览器开发商觉得某个特性很不错，那他可能在浏览器中实现它。如果某个特性有非常多的开发商实现，那么这个特性或API就会广泛使用，但是某个特性的实现会有一个先后的过程，导致一个结果“旧的浏览器不支持这个特性”。
设计差异；浏览器开发商们同样实现一个特性或API，但他们的观点和编码风格差异，同样的一个功能在同的浏览器中也会有很大的差别。
软件BUG；任何的软件都存在BUG，Web浏览器也是一个软件。并且没有按照规范准确实现客户端的JavaScriptAPI
如何处理兼容性问题
如果你去面试一个前端工程师，面试官最常问的一个问题：如何解决浏览器的兼容性问题？
- 功能测试（capability testing）是解决不兼容问题的一种强大技术。
1 if(element.addEventListener){ 2 //W3C方法 3 element.addEventListener("keydown",handler,false); 4 element.addEventListener("keypress",handler,false); 5 }else if(element.attachEvent){ 6 //IE方法 7 element.attachEvent("onkeydown",handler); 8 element.attachEvent("onkeypress",handler); 9 }else{ 10 //选择广泛使用方式 11 element.onkeydown = element.onkeypress = handler; 12 }
- 处理兼容性问题其中最简单的方法就是使用类库（JQuery、Zepto、Excanvas），前两者定义了新的客户端API并兼容所有浏览器。例如，JQuery处理事件程序注册通过Bind进行完成。
但是，有时候为了实现一个非常简单的功能，透明地实现整个标准并非真正可行。
例如，我的一个应用：只在页面实现一个Ajax请求！
使用兼容性类库：
1 <script src="./core/zepto.min.js"></script> 24k 2 <script> 3 $.ajax({ 4 type: 'GET', 5 url: './index.html', 6 data: {}, //参数 7 dataType: 'html', //返回类型 8 success: function(data){ 9 //成功回调 10 }, 11 error: function(xhr, type){ 12 alert('Ajax error!') 13 } 14 }); 15 </script>
使用原生JavaScript:
1 var xml_http; 2 if (window.ActiveXObject) { 3 xml_http = new ActiveXObject("Microsoft.XMLHTTP"); 4 } else if (window.XMLHttpRequest) { 5 xml_http = new XMLHttpRequest(); 6 } 7 xml_http.open("GET", "./index"); 8 xml_http.send(null); 9 xml_http.onreadystatechange = function () { 10 if ((xml_http.readyState == 4) && (xml_http.status == 200)) { 11 alert('success'); 12 } else { 13 alert('fail'); 14 } 15 }
考虑兼容性问题时，要考虑适中的方法引用。
- 分级浏览器支持（graded browser support）是由Yahoo率先提出的一种测试技术。
从某种维度将浏览器版本/操作系统变体进行分级，使用不同的测试用例，从而解决兼容性问题。
- Internet Explorer是的条件注释
其实我们不难发现，客户端JavaScript编程中的很多不兼容性问题都是针对IE的，也就是说必须按照某种方式为IE编写代码，而按照另一种方式为其他浏览器编写代码。IE支持条件注释。
1 <!–[if lt IE 8]> 2 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script> 3 <![endif]–> 4 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 5 <!--[if lt IE 9]> 6 <script src="__STATIC__/bootstrap/js/html5shiv.js?v={:SITE_VERSION}"></script> 7 <![endif]--> 8 <block name="style"></block> 9 <!--[if lt IE 9]> 10 <script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script> 11 <![endif]--> 12 <!--[if gte IE 9]><!--> 13 <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script> 14 <!--<![endif]-->
本文只是简单讲解了前端JavaScript脚本的兼容性问题原因及解决办法，当然，这些都只是一个基础的篇章。
要想完全解决前端兼容性问题，路还很长......