浏览器兼容性问题解决方案与工具

浏览器兼容性问题解决方案与工具

1.条件注释

IE条件注释

即在标准HTML注释中，加入特殊的IE内核能识别的语法，根据不同的IE版本来解读。IE5开始就支持条件注释，但IE10在标准模式下已经不支持条件注释。

用法：

 除IE外都可识别 

可以在中间插入HTML和script，实现对不同浏览器的支持。

2.IE Hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS Hack大致有3种表现形式

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线和星号" * "，IE7能识别星号" * "，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)。

3. js 能力检测

浏览器提供商虽然在实现公共接口方面投入了很多精力，但结果仍然是每一种浏览器都有各自的长处，也都有各自的缺点。面对普遍存在的不一致性问题，开发人员更常见的就得利用各种客户端检测方法，来突破或者规避种种局限性。最常用也最为人们广泛接受的客户端检测形式是能力检测（又称特性检测）,它的目标不是识别特定的浏览器，而是识别浏览器的能力！

能力检测有两个关键点：

1.先检测能达到目的的最常用特性，这可以保证代码的最优化，因为在多数情况下都可以避免测试多个条件。
2.必须实际测试要用到的特性，因为一个特性的存在并不意味着另一个特性也存在。

4.html5shiv.js

html5shiv：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。使用Javascript来使不支持HTML5的浏览器支持HTML标签。利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。

使用方法

考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可：