《Web前端开发最佳实践》——2.4 多浏览器测试：多测试，早测试

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第2章，第2.4节,作者:党　建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.4　多浏览器测试：多测试，早测试

多浏览器的兼容一直是前端开发中比较头疼的一个问题，尤其是IE 6和IE 7
浏览器盛行的阶段。以目前的趋势来看，随着IE 6和IE 7等浏览器逐渐退出市场以及各新版本浏览器对标准的支持会越来越好，浏览器的兼容问题也随之慢慢变小。此外，各种成熟的前端框架已经兼容了几乎所有浏览器，如果使用了这些框架则会减少浏览器的兼容问题。对Web应用开发者来说，这是一件值得庆幸的事，我们再也不用经常解决各种浏览器兼容的问题了，可以把更多的精力放在具体的业务逻辑上。虽然浏览器兼容问题已不是前端开发中的主要问题，但是还是会有一些兼容问题需要解决。目前多浏览器的兼容问题主要集中在如下几个方面。

1. IE 7、IE 8的兼容
   IE 6已经基本退出了历史舞台，在开发过程中可以不再考虑兼容IE 6的问题。针对IE 6用户，仅显示提示升级信息即可。IE 7和IE 8的占有率目前还很高，但其表现和标准的浏览器有一定的差距。这里并不打算介绍IE系列浏览器的具体兼容问题，但需要强调的是，IE 7和IE 8的兼容问题是目前浏览器兼容的主要关注点。
2. HTML5的兼容
   最近几年，HTML5发展迅速，其大量的新特性也广泛应用。尽管各浏览器也加快了对新标准支持的脚步，但支持的步调并不一致，总有一些特性并不能被所有的浏览器支持。此外，使用HTML5新特性的同时也必定要考虑旧浏览器兼容的问题，如果要使用HTML5中的新特性，就必须明确浏览器支持的范围，考虑对于不支持的浏览器如何做到平稳降级。

浏览器兼容问题直接影响到方案的选择问题，应该在开发阶段就进行浏览器的兼容性测试，不仅要在多个浏览器中测试，甚至还包括在相同浏览器的不同版本中测试，只有这样才能确保设计的效果可完美地呈现在所访问的浏览器中。此外，为了把浏览器的兼容问题降到最小，在开发过程需要遵循以下一些准则。
（1）编写高质量、标准的HTML
不标准或者无效的HTML，可能在某个浏览器中可以正常显示，但是很难保证在所有的浏览器或者将来新版本的浏览器中正确显示。要让网页在所有浏览器中的显示效果相同，最有效的方法就是编写高质量和标准的HTML与CSS代码。为了确保代码的高质量和标准，可以使用一些标准验证工具，如W3C提供的HTML和CSS的标准验证工具以及检查JavaScript代码规范的JSLint等。
（2）明确支持的浏览器范围
多浏览器的支持一直是Web开发中的难点，浏览器的版本众多并且对标准的支持并不相同，很难在主流浏览器中做到网页的展示和交互都完全符合设计要求。因此，在Web项目开发之初就应该明确浏览器的支持范围，并在不支持的浏览器访问的时候引导用户下载和使用支持的浏览器。在支持的浏览器中也并非能做到所有浏览器中的展示效果和交互都满足设计要求。如下是浏览器支持的4个标准，可供在确认浏览器支持情况时参考。

• 外观和交互符合设计需求。
• 外观上有所差异，但不影响整体的效果。
• 外观和设计不符合，但不影响页面的交互。
• 完全不支持设计的功能。

在明确浏览器支持时，可按照此4类浏览器支持的标准制定浏览器支持情况列表，供开发和测试参考。
多浏览器测试是个耗费精力的工作，不太可能同时测试所有的浏览器以及浏览器的各种版本，在开发阶段只需要重点测试网站支持的浏览器就足够了。对于Chrome、Safari、Firefox等高级浏览器，它们的更新频繁，一般只需要支持最新版本即可。Chrome和Safari浏览器有相同的WebKit浏览器内核，在开发过程中可以重点测试其中一个浏览器。IE系列浏览器各版本之间的差异较大，开发和测试过程中需要测试所有支持的IE浏览器版本。IE Tester是个很好的IE兼容测试工具，可以模拟各个版本的IE浏览器，当然也可以简单地更改IE浏览器渲染模式来查看低版本IE浏览器中渲染的效果。另外，IE 9浏览器自带的IE Dev Toolbar可以方便地切换各版本模式，如从项目开始就得明确要支持的浏览器范围，当有不支持的浏览器访问时要引导用户下载和使用支持的浏览器，如图2-2所示。

（3）尽量避免出现浏览器兼容问题
浏览器兼容技能属于开发技巧，不属于开发技术。开发技巧在某些场合的确能起到事半功倍的效果，但带来的问题会是代码的难理解和难维护。例如，为了使CSS兼容IE 7而在CSS属性前面添加的星号（*），增加了代码量同时降低了可读性。因此，遇到兼容问题，首先考虑是否可以更改方案，使用没有兼容问题的代码等，其次再考虑如何兼容的问题。兼容IE系列的浏览器，建议使用IE特有的条件表达式，让兼容相关的代码独立，提高代码的可维护性。
（4）使用HTML5新特性时做好平稳降级
目前，在前端开发中对HTML5兼容，实属无奈之举。HTML5的兼容包括：新标签的兼容、CSS3的兼容，以及新增加的API的兼容。HTML5中的新标签并不能被IE 7和IE 8，以及其他旧浏览器所支持，当然可以通过一些技巧让新标签在这些浏览器中正常展现，如可以使用html5shiv框架。CSS本身的渲染特点使得在开发中可以直接使用CSS3中的新特性，如果浏览器不支持CSS3的新特性，则会直接忽略，不会产生语法错误。HTML5新增加接口的使用过程中，必须添加条件判断。框架Modernizr已经很好地封装了对HTML5新特性的判断，推荐在实际项目中使用。在使用新特性时有必要了解特性在各浏览器中的支持状况，推荐使用“Can I use”网站查询新特性的浏览器兼容情况，如查询浏览器对CSS3中的圆角支持情况（见图2-3）。

https://yqfile.alicdn.com/4d262b8f9f6ccb0ef7430789cc1231acf5c6f3d3.png" >