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

1.条件注释

IE条件注释

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

用法：

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

可以在中间插入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标签中添加脚本引用即可：

<!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]—>  

5.respond.js

Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，
实现响应式网页设计（Responsive Web Design）。

使用方法

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

<!--[if lt IE 9]><script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > </script><![endif]—>  

6.css reset

在HTML标签在浏览器里有默认的样式，例如 p 标签有上下[边距]，strong标签有字体[加粗]样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有[缩进]的样式，在IE下，它的缩进是通过[margin]实现的，而Firefox下，它的缩进是由[padding]实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

7.normalize.css

normalize.css是一个现代的，为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的，也都是些需要规范化的样式。
reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置，保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。相对于普通的css reset，Normalize的的浏览器的兼容性更好，normalize.css支持更多的浏览器（包括手机端）。

8.Modernizr

Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持[HTML5]和CSS3的浏览器中充分利用[HTML5]和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持[HTML5]的 特性——比如audio、video、本地储存、和新的 <input>标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对[HTML5]的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。

9.postCSS

PostCSS是一个使用JavaScript插件来转换CSS的工具。它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。
它也可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我们自动生成兼容性代码。