浏览器兼容性

概述

为了测试框架的兼容性，下载了Turbo.net，用了之后感觉软件真强大，几乎能模拟所有主流浏览器。

浏览器的环境不同，运行出来的网页效果也不同。

盒子模型

一道面试题，现在已经被当成笑话了。

请问盒子模型有几种？

答：两种，IE盒子模型与标准盒子模型。

这就很皮了，为啥IE就这么隔路呢？

基本的肯定都一样，盒子模型包含四部分：content(内容)、padding(内边距)、border(边框)、margin(外边距)。

从图上我们可以看到，标准盒子模型的宽高是指content，但是IE盒子模型的宽高是指content+padding+border。

浏览器

发展史

1991年，世界上第一款浏览器WorldWideWeb诞生。

1994年，Netscape。

1996年，IE与Opera，IE捆绑在windows上，最终将Netscape打败，但接下来IE固步自封，不思进取。

2003年，Safari，苹果上的浏览器。

2004年，Firefox，网景程序员重新集结，拥抱开源，打败IE。

2008年，Chrome诞生，走向统一。

JavaScript

不同浏览器而言，如果仅仅是样式问题，问题还不大，毕竟没有设计师那么精确。

所以主要是JavaScript兼容性，如果JavaScript兼容失败，功能有可能DOWN掉，这就比较严重了。

我们主要研究一下JavaScript的兼容性。

兼容性

1995年，网速慢，提交个表单好久之后才从服务端得到响应，所以网景公司想设计一款浏览器端的脚本语言。

网景公司找来了布兰登 艾克，这位大牛花了十天时间设计出了JavaScript(原本设计是叫LiveScript，为了跟风Java，改名为JavaScript)。

之后，IE创造了JScript，抄袭JavaScript，因为版权问题，微软改了个名。

然后就发生了著名的浏览器大战：IE和Netscape为了提高自己的市场占有率，开始为自己的浏览器环境扩充功能，导致两家不兼容。

1997年，ECMA定义了ECMAScript国际标准来规范JavaScript。

IE5到IE7支持ES3。

IE8和IE9支持部分ES5，IE10以上全面支持ES5，但只支持极少的一部分ES6语法。微软也放弃了，开始转战新浏览器Edge。

IE9支持除了严格模式以外的新特性，IE8只支持defineProperty、getOwnPropertyDescriptor的部分特性和Json的新特性。

所以测试IE的兼容性，我们就测试IE8 IE9的部分ES5支持是否可以兼容采用的框架，IE10以上肯定好使，因为目前框架主流的还是ES5。

目前主流的浏览器(Edge、Chrome、Firefox)虽然支持ES6，但还未全面支持。

如在AngularJS项目中：

let url = '/api/xxx';

我们用let定义变量，grunt会报错，说明还不推荐启用ES6。

而在Angular中，我们使用ES6的超集TypeScript进行开发。

我们放心地使用各种新语法，而编译器会自动将我们的代码编译成旧版本语法，无需我们考虑浏览器兼容问题。

ng-bootstrap

就前两天在github上看到的ng-bootstrap为例，在其README中明确写着支持什么浏览器的什么版本。