2016/06/30
这是个前端开发人员绕不开的话题，除非你做自己的网站，不用考虑那些使用IE浏览器的用户，我的网站我做主！
但是更多的开发人员是在耕耘公司的项目，而公司的项目是需要面向所有用户的。
前言
现状
现实情况是国内甚至全世界仍然有使用windows XP操作系统（自带IE 6浏览器）和windows 7操作系统（自带IE 8浏览器）的用户。它并不像Chrome和Firefox这些所谓的现代浏览器那样，版本升级可以覆盖，而微软的这一系列浏览器早期因为标准的缺失，导致了需要对它进行兼容性处理。
因为
windows系统的内部原因，这些版本的浏览器无法升级至最新版本。
完整的兼容性问题列表，请点击这里，扫一眼你会发现，大部分问题都集中在IE 6~9。
说明
现在的前端开发方式分为两种，我的理解是：基于浏览器的和基于bundle工具的。
基于浏览器的
使用require.js或sea.js等模块化工具开发项目，CSS和JS在HTML文档中通过link和script标签引入，有时候顺序很重要。
基于bundle工具的
使用诸如webpack等为SPA应用而生的构建工具，用CommonJS规范引用公共库或者自己编写的库，然后构建工具将所有依赖一起打包。
下文主要针对基于浏览器的开发方式解决兼容性，而基于bundle工具的，不同的框架有不同的解决方案。
正文
HTML
规范
整个文档的内容：注释和标签（包括像div内容标签，meta标签，link标签，script标签等所有以尖括号包围内容的标签）写法的规范。
不同的浏览器对注释和标签属性的解析和内容的处理略有不同，但大部分问题都可以为文档指定最新的DTD而得以解决：
<!DOCTYPE html>
指定DTD之后，参照HTML5规范写即可避免大部分问题，点这里看规范。
语义化
如果定义了上述HTML5的DTD，而且需要使用到HTML 5语言的新标签，比如：
<main></main>
<section></section>
<nav></nav>
等等 语义化 标签，但是IE 6~9 是无法识别的，这时你需要 html5shiv 来帮助IE浏览器理解这些标签。
如果你的网站使用DIV+CSS布局，那就不需要了。
多媒体
低版本的IE浏览器无法理解HTML 5语言的多媒体标签<video>和<audio>，这时你需要这个polyfills：MediaElement.js，不过针对IE，它只支持IE 9+。
CSS
选择器
现在遍地都是CSS 3语法，但是IE 8以下的浏览器无法理解CSS 3语法中的一些选择器，这时你需要一个polyfills：selectivizr。
属性
同样，IE 9以下的浏览器无法理解诸如border-radius等CSS 3样式属性，这时你需要 PIE（Progressive Internet Explorer）。
布局
传统网站内容的布局（layout）是依赖 盒模型，垂直居中这种老大难的问题就不好解决。所以W3C在CSS 3中提出了 Flexible Box（弹性布局），不过只支持IE 9+。
而针对IE 6~8，如果需要使用弹性布局，你需要这个polyfills：flexie。
hack
针对IE 6~9的hack写法，还有就是解决低版本IE对属性表现的不一致。
div {
margin-top: 13px; /* 所有浏览器都支持 */
margin-top: 13px !important; /* Firefox、IE7支持 */
_margin-top: 13px; /* IE6支持 */
*margin-top: 13px; /* IE6、IE7支持 */
+margin-top: 13px; /* IE7支持 */
margin-top: 13px\9; /* IE6、IE7、IE8、IE9支持 */
margin-top: 13px\0; /* IE8、IE9支持 */
}
盒模型
IE 6的文档可以设置一种Quirks Mode（怪异模式），它的本意是模拟IE 5.5的一些行为，但是这种模式下盒模型的计算与W3C的盒模型解析有差别：
w3c-ie6-quirks
处理方式就是在
CSS 3中设置所有标签的box-sizing属性为border-box，以适应IE 6。但是这个属性只有IE 8+支持。
div {
box-sizing: border-box;
}
JavaScript
现在的市面上大部分JS语言指南的标准都是ES 3，而现在的浏览器能解析的标准列表如下：
-
IE 6~7完全解析ES 3 -
IE 8部分解析ES 5 -
IE 9+完全解析ES 5 -
现代浏览器完全解析ES 5，部分解析ES 6
诸如React等框架已经开始使用ES 6和ES 7了（但是他们最终都需要转换成ES 5甚至是ES 3才能在浏览器运行），但更多的框架都在逐渐抛弃IE 8。
排除框架不谈，我们在开发中或多或少的在使用ES 5标准了，那IE 6~8不认识ES 5中的一些属性和方法怎么办？
这时，你需要 es5-shim，它包含两个内容：shim和sham
- shim，它使用
ES 3的标准实现ES 5的功能 - sham，它还是使用
ES 3的标准模拟ES 5功能，但是不保证能实现
最后
polyfills
浏览器不支持新API的话，它会切换到能够实现的API代码段。
比如ajax请求，所有浏览器都可以通过XMLHttpRequest这个API，现在已有诸如 fetch 来处理。那么使用这种polyfills，你在项目中使用fetch时，遇到无法识别的浏览器时，它会切换到使用XMLHttpRequest。
shim
他是使用旧的JS引擎实现新标准，例子就是jQuery。
这些所谓的polyfills、shim，源码都是使用JS来解决兼容性问题，再次证明了JS语言的重要性。
不管是HTML、JS、CSS语言的属性或方法，使用这个网站可以查看兼容性，点我，点我。
网友评论