高校网站对浏览器兼容性测试

高校网站对浏览器兼容性测试

摘要：主要用Firefox、Chrome、Safari这3个主流浏览器对全国100所高校网站进行兼容性测试，测试的内容主要是各高校的首页、二级页面的排版、布局及各功能的使用情况。根据测试结果，对一些有代表性的不兼容问题进行分析，并给出了相应的解决办法。最后对高校网站的兼容性建设提出了一些建议。

关键词：浏览器；兼容性；测试

1 浏览器的概述

浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。由于不同的浏览器内核对网页编写语法的解释不同，因此同一网页在不同内核的浏览器里显示的效果也可能不同。现阶段，使用不同的浏览器访问一些高校网站时，一些高校的网站对不同的浏览器并不能很好地兼容，对除IE外的浏览器呈现一些排版的错乱，甚至是一些内容不能完全显示、功能不能使用。因此，对高校网站进行不同浏览器的兼容性测试，对其产

生的问题进行分析、归纳、总结，以便改良其网站的设计。

2 高校网站对浏览器兼容性测试及分析

2.1 兼容性测试的内容

对全国2101所普通高等学校进行自编程序随机选取其中100所高校网站进行主流浏览器的兼容性测试，其随机结果为本科院校37所，专科院校63所。进行测试的内容主要是各高校的首页、二级

页面的排版、布局及各功能的使用情况。

2.2 兼容性测试的方法

采用Firefox 5.0.1版本、Safari 5.1版本、Chrome12.0

版本浏览器通过公共的互联网对各高校主页进行访问，将其页面与用IE 7.0访问的页面结果进行比较。对高校网站的测试页面，主要是高校网站的首页、学校概况栏目以及随机选取1到2个学校新闻或通知。

2.3 兼容性测试的结果

随机选出的100所高校有99个能通过公共互联网进行访问，而在测试中能够完全兼容测试浏览器的有9个。测试中一共发现452处不兼容。其计算方法为：对于同一个网站的同类型的不兼容只计算为一次；对于同一个网站的同一个内容，不兼容次数为浏览器不兼容的个数。对于这452处不兼容，笔者将其分为一般不兼容、严重不兼

容。其划分依据如下：

一般不兼容：指在测试浏览器中显示的页面与在IE浏览器中显示的页面部分排版不一样，部分情况会影响阅读效果但都不会影响

信息的获取。

严重不兼容：指在测试浏览器中显示的页面与在IE浏览器中

显示的页面排版不一样，严重影响阅读效果或影响信息的获取。

这452处不兼容的具体类型及其分布见表1。表中F代表

Firefox浏览器，S代表Safari浏览器，C代表Chrome浏览器。

2.4 兼容性测试的分析

对于以上较突出的不兼容类型，笔者采用查看网页源代码的方

式进行分析，通过分析，其不兼容主要原因有以下几点：

（1）网页采用DIV+CSS（Cascading Style Sheets层叠样式表单）布局方法，但是目前由于不同浏览器对CSS的解释不统一，因此会造成在IE浏览器里能正常显示的页面变换到其他浏览器中后，

显示效果不一样，甚至会造成页面的错位。

（2）网页中的一些特效采用了JavaScript语法，而Firefox、Safari、Chrome对JavaScript中没有严格遵守ECMAScript规范的一些属性和方法不支持，因此一些能在IE浏览器中显示的特效无法在

其他浏览器中正常显示。

（3）网页中使用了在不同浏览器中解释不一样的JavaScript 函数。

由于不兼容处的地方过多，不能对每一处的不兼容都进行详细的

分析，本文将重点对有代表性的不兼容进行分析。

（1）浏览器时间显示的问题。很多高校在主页都会显示年份日期，如2011年8月5日，但有些高校主页在其他3个浏览器里显示却是111 年8月5日。这主要是因为对于年份的获取，部分高校

采用了JavaScript中的以下方法：

var today=new Date();

var year=today.getYear();

在IE浏览器中，通过以上方法变量year的值可以变为2011，而在Firefox、Safari、Chrome浏览器下，today.getYear()返回的是Date 对象中的年份与1900年之间的差距，即111，因此显示成为111年。

解决此问题可以更换使用getFullYear()函数，即：

var today=new Date();

var year=today.getFullYear();

（2）悬浮告示通知没有移动。有学校的告示通知最初的位置是在版面的左上角，然后通过移动进行展示。但是告示通知一旦不移动，很有可能将学校网站首页的导航栏遮住，从而使得用户无法选择其中某个栏目。其主要有两个原因：

①假设有DIV元素id为”img”，部分高校对元素赋值时，形式如下：

img.style.left=x+document.body.scrollLeft;

直接使用元素id的方式对其赋值，可能会在Firefox等浏览器中赋值失败，因此会导致其悬浮告示通知在Firefox等浏览器中无法移动。经查阅网络资料，其解释为IE中HTML元素中的ID可以作为document的下属对象变量名直接使用，但Firefox不能。建议使用

img1=document.getElementById("img");

img1.style.left=x+document.body.scrollLeft;

形式或getElementById("img").style.left = x + document.body.scrollLeft;代替。不过在笔者测试的网站中，有部分网