处理浏览器兼容性办法

对于搞前端的筒子们来说，兼容性无异于是基础并头疼问题，一直嚣张的不行啊，我仅用我勉强的功力，说说我知道的处理办法，要是有大神知道更好的或者写的有出入的地方还请指点一二。

首先，明确支持哪些浏览器，风烛残年般的IE6，7，8使用的是越来越少，比如现在

jquery2.x版本已经不支持他们了，知道了要兼容的浏览器，下面就是浏览器调试的问题了。

先说说桌面端浏览器的调试。

方法一

下载所需兼容的浏览器直接测试，有页面需要修改的，直接调试兼容， 调试的时

候，有的浏览器自带调试工具，比如chrome，Safari和火狐。

方法二

在实际情况中，一个项目所需兼容的浏览器可能很多，下载这么多的浏览器到本机

上，虽不会造成太大影响，但也是有些多余啊（反正我是这么想的），那么，就可

以使用虚拟机来代替。微软官方提供了很多版本的虚拟机，也可以通过https://github.com/xdissent/ievms 来获得各版本，使用VirtualBox免费的虚拟机软件来安装。

安装各个版本的windows系统，下载好各版本的原生的IE浏览器，进行测试。

方法三

直接用测试工具，比如IETester，经常用来测试IE的各个版本的工具。有90%的可靠性。

再说说移动端浏览器调试，

方法一

针对移动端，可以真机进行测试。购买主流的手机进行测试即可。

方法二

可以使用一些云测试一类，比如 http://www.testin.cn 可以对一些网站和app进行测试（貌似收费），针对IOS系统，支持ios7,8,9。如果mac os系统，安装xcode就会有虚拟测试机。那对于安卓机呢，就有 http://www.genymotion.net 安卓模拟器，不过是基于VirtualBox的，下载安装即可。

上面我们说的都是调试各个浏览器，针对兼容性问题有没有通用的方法呢？一般来说，其实是有下面几种通用的处理兼容性的方法：

1.csshack

只要增加相应浏览器的兼容字符就可以了。在 http://browserhacks.com/ 这个网站中，就可以查到浏览器hack的写法。

2.polyfill和shim

靠旧的环境中的一些手段来支持新的API和一些特性，这些新的特性在浏览器中就可以正确的使用。比如 https://github.com/aFarkas/html5shiv/ 就是一个很出名的解决兼容性的shim，那它有什么作用呢，在一些老的IE，IE6，7，8它是不支持html5的标签的，那么相应的样式，肯定也是不支持的，通过这个shim，引入这么一个库，就可以使这些IE正常访问页面。

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

还有IE6-8不支持css3的媒体查询，那么，这么一个js库同样有名的polyfill， https://github.com/scottjehl/Respond 如果需要在IE6-8也实现响应式设计，就需要用IE的条件表达式来引入respond库，respond库polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) ，主要支持min/max-width媒体查询。

3.modernizr.js

http://modernizr.cn/
Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。

为什么使用 Modernizr

使用炫酷新颖的 web 技术是一件很有趣的事情，但你不得不面对落后的浏览器。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。

工作原理

Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

其实，在你使用标签或样式之前呢，可以登录 http://caniuse.com/ caniuse来查看浏览器的兼容情况，然后再考虑是否使用以及各解决方案。

至此，分享大概就是这些了，后面如果发现好用的库会及时分享哒~