20.6　测试页面

20.6　测试页面

即便代码通过了验证，页面可能仍然不像预期的那样工作，如图20.6.1所示，或者可能在一个浏览器中是正常工作的，在另一个浏览器中却有问题。在不同的浏览器和平台上对页面进行测试是很重要的（参见本节末尾的“应该在哪些浏览器中进行测试”）。

测试HTML页面

对HTML和CSS进行验证（参见20.5节），作出必要的修改。
打开浏览器，选择File → Open File。找到要测试的网页，点击Open。页面将出现在浏览器中。
检查整个页面，确保与你希望看到的完全一样。例如：
- 格式与期望的是否一致
- 链接的URL是否指向了正确的页面或资源（可以通过激活链接并查看结果对URL进行测试）
- CSS文件是否引用正确（参见图20.6.1、图 20.6.2 和图20.6.3）
- 所有的图像都出现了吗？它们的位置和对齐方式是对的吗？
在不关闭浏览器中页面的情况下，打开有关的HTML或CSS文档，作出必要的改动。
保存修改。
切换到浏览器，刷新页面并查看所作的改动。
重复第3步至第6步，直到你对网页满意为止。即便要测很多次，也不要感到沮丧。

再次对代码进行验证，确保没有引入任何其他的错误。

从第2步开始，在其他的浏览器中执行同样的测试流程，直到满意并认为页面做好了发布准备为止。
将文件上传至服务器。
回到浏览器，在地址栏中输入页面的URL，按下回车键。页面将出现在浏览器中。
再次对页面进行检查，确保没有任何问题（现在，页面位于服务器上）。同时，如果访问者可能通过移动设备访问网站的话，别忘了在移动设备上对其进行检查。

提示　推荐在将文件上传至服务器之前先对网站的本地版本进行完全测试。上传之后，针对服务器上的版本，再次对网站进行完全测试（不管在开发过程中对本地版本做过多少测试工作），因为这是访问者会看到的版本。

20.6　测试页面 - 图1

图20.6.1　这个页面通过了验证，但它看上去并不像预期的那样。问题出在哪儿（参见图20.6.2）

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8" />
     <title>Mary Anna, the Iguana</title>
     <link rel="stylesheet" href="css/style.css" />
</head>
<body>
 
...
 
</body>
</html>

图20.6.2　问题出在指向CSS文件的链接上——CSS文件的名称为Styles.css，而这里指向的却是Styles.css。浏览器无法找到CSS，因此对页面的显示是有问题的（参见图20.6.1）。改正了代码中的文件名后，样式表就被加载进来了

提示　再提醒一次，如果可能的话，要在多种平台上的多个浏览器中对HTML文档进行测试（参见“应该在哪些浏览器中进行测试”）。你无法预知访问者会使用哪种浏览器或计算机。

20.6　测试页面 - 图2

图20.6.3　现在，指向CSS的链接改正了，页面显示正确

提示　关于移动设备浏览器测试，参见12.3节。

提示　如果浏览器中显示的是HTML代码而不是页面，要确保文件使用的是.html或.htm扩展名（而不是像.txt这样的扩展名）。

提示　有时候，页面上的问题并不是你的错，尤其是样式上的问题。在认为问题出在代码上之前，一定要确保浏览器对遇到问题的特性是支持的。附录A和附录B中有关于HTML和CSS特性的浏览器支持情况的资源链接。

应该在哪些浏览器中进行测试

通常，大多数开发网站的人士会在以下浏览器中对网站进行验证：

Chrome的最新版本。Chrome会在你的计算机上自动进行更新，大约每隔六周就会发布一个新的版本。Chrome的下载地址为www.google.com/chrome。

Firefox 3.6+。Firefox同Chrome一样，发行周期也很快，不过其更新并不是自动进行的。Firefox在版本3.6之后已经有很多版本发布出来了，因此3.6不再是优先选择的版本了。Firefox的下载地址为www.firefox.com。

Internet Explorer 7+。IE的下载地址为http://windows.microsoft.com/en-US/internet-explorer/downloads/ie。

Safari 5+。在大多数情况下，对于该浏览器，只需要在其Mac版本中进行测试。尽管Safari也有Windows版本，但用户非常少，因此没有专门为此测试的必要。Safari的下载地址为www.apple.com/safari/。

Opera 11+。Opera在世界上很多地区都有少量的市场份额，不过它对HTML5的支持很好。Opera的下载地址为www.opera.com/。

由于HTML5、CSS3、改进的JavaScript引擎以及其他技术的出现，浏览器的处理能力在近几年有飞速的增长。这里所列的大多数浏览器对CSS的呈现是相似的（大多数例外的情况都是关于CSS3的）。Internet Explorer 7和8比其他所列的浏览器要旧得多，因此也更容易产生差异和错误。因此，如果你的网站在IE7和IE8中的样子同在现代浏览器中的样子相比有一点不同，也是可以接受的。

那么，如何对待Internet Explorer 6呢？由于IE6存在大量的怪异处理方式及错误，它已成为设计人员和开发人员多年以来的眼中盯。不过值得庆幸的是，它的市场份额已经大幅缩水了（参见www.ie6countdown.com）。现在，网站拥有者为网站能在IE6中正常运转而付出额外精力的情况已经变少了，但是否这样做取决于网站的访问者。一些大的公司仍不愿完全抛弃IE6，但人们通常不再用它了，因此为IE6调整网站所花的大量精力不会带来太多收益。但是，了解你的访问者是必要的。在世界上某些地区（如亚洲的某些地方），还有大量的IE6用户。此外，一些大型组织也使用IE6作为其默认浏览器。

对所有浏览器和平台的用户都具有可访问性是很有挑战的。关于如何在各种浏览器（尤其是Internet Explorer的各个版本）上对页面进行测试的问题，参见Addy Osmani的文章（http://coding.smashingmagazine.com/2011/09/02/reliable-cross-browser-testing-part-1-internet-explorer/）。此外，如果你的朋友和家人使用你没有的浏览器，他们也可以帮到你。如果你的时间和资源有限，需要缩小测试的范围，也应该尽可能地在Chrome和Firefox的最新版本及IE7+上进行测试。

浏览器市场的发展日新月异——你阅读到这一段话的时候，人们可能已经在试用这些浏览器更新的版本了。不过，只要遵循渐进增强的原则，你的网站就可以为旧的浏览器提供简单的体验，为现代浏览器提供增强的体验。

鉴于此，Yahoo!推出了分级浏览器支持（Graded Browser Support）的概念（http://yuilibrary.com/yui/docs/tutorials/gbs/），并将这个概念应用于对其JavaScript和CSS框架YUI（www.yuilibrary.com）的测试。该观点将浏览器分成不同的等级，不同的等级定义了对浏览器进行测试时的预期大小。你可以采取这种方法，在你的项目中对浏览器进行分级。

Google对Google Apps采取的方法有所不同，该方法支持大多数浏览器的最新的两个版本（http://googleenterprise.blogspot.com/2011/06/our-plans-to-support-modernbrowsers.html）。同理，不同项目的需求可能不同。

20.6 测试页面

20.6 测试页面

20.6　测试页面

20.6　测试页面