浏览器兼容手册网页设计

浏览器兼容手册网页设计（精选12篇）

浏览器兼容手册网页设计 第1篇

这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来，

并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了...汗。大家一起慢慢完善吧。

javascript部分

1. document.form.item 问题

问题：

代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行

解决方法：

改用 document.formName.elements[“elementName”]

2. 集合类对象问题

问题：

代码中许多集合类对象取用时使用，IE能接受，FF不能

解决方法：

改用 [] 作为下标运算，例：

document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

3. window.event

问题：

使用 window.event 无法在FF上运行

解决方法：

FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：

nMouseMove = “functionName(event)”

function functionName (e) {

e = e || window.event;

......

}

4. HTML对象的 id 作为对象名的问题

问题：

在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能

解决方法：

使用对象变量时全部用标准的 getElementById(“idName”)

5. 用 idName 字符串取得对象的问题

问题：

在IE中，利用 eval(“idName”) 可以取得 id 为 idName 的HTML对象，在FF中不能

解决方法：

用 getElementById(“idName”) 代替 eval(“idName”)

6. 变量名与某HTML对象 id 相同的问题

问题：

在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能

解决方法：

在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行

最好不要取与HTML对象 id 相同的变量名，以减少错误

7. event.x 与 event.y 问题

问题：

在IE中，event 对象有x,y属性，FF中没有

解决方法：

在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有

故采用 event.clientX 代替 event.x ，在IE中也有这个变量

event.clientX 与 event.pageX 有微妙的差别，就是滚动条

要完全一样，可以这样：

mX = event.x ? event.x : event.pageX;

然后用 mX 代替 event.x

8. 关于frame

问题：

在IE中可以用 window.testFrame. 取得该frame，FF中不行

解决方法：

window.top.document.getElementById(“testFrame”).src = “xx.htm”

window.top.frameName.location = “xx.htm”

9. 取得元素的属性

在FF中，自己定义的属性必须 getAttribute() 取得

10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes

问题：

childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点

解决方法：

可以通过 node.getElementsByTagName() 来回避这个问题

问题：

当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点

问题：

FF中节点自己没有 removeNode 方法

解决方法：

必须使用如下方法 node.parentNode.removeChild(node)

11. const 问题

问题：

在IE中不能使用 const 关键字

解决方法：

以 var 代替

12. body 对象

FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在

这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题

解决方法：

一切在body上插入节点的动作，全部在onload后进行

13. url encoding

问题：

一般FF无法识别js中的&

解决方法：

在js中如果书写url就直接写&不要写&

14. nodeName 和 tagName 问题

问题：

在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题

解决方法：

使用 tagName，但应检测其是否为空

15. 元素属性

IE下 input.type 属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题

问题：

在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素

是否还有其它不能取的元素还不知道(这个问题还有争议，还在研究中)

17. 调用子框架或者其它框架中的元素的问题

在IE中，可以用如下方法来取得子元素中的值

document.getElementById(“frameName”).(document.)elementName

window.frames[“frameName”].elementName

在FF中则需要改成如下形式来执行，与IE兼容：

window.frames[“frameName”].contentWindow.document.elementName

window.frames[“frameName”].document.elementName

18. 对象宽高赋值问题

问题：

FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法：

统一使用 obj.style.height = imgObj.height + “px”;

19. innerText的问题

问题：

innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行

解决方法：

在非IE浏览器中使用textContent代替innerText

20. event.srcElement和event.toElement问题

问题：

IE下，even对象有srcElement属性，但是没有target属性;Firefox下，even对象有target属性，但是没有srcElement属性

解决方法：

var source = e.target || e.srcElement;

var target = e.relatedTarget || e.toElement;

21. 禁止选取网页内容

问题：

FF需要用CSS禁止，IE用JS禁止

解决方法：

IE: obj.onselectstart = function() {return false;}

FF: -moz-user-select:none;

22. 捕获事件

问题：

FF没有setCapture()、releaseCapture()方法

解决方法：

IE:

obj.setCapture();

obj.releaseCapture();

FF:

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

if (!window.captureEvents) {

o.setCapture();

}else {

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

if (!window.captureEvents) {

o.releaseCapture();

}else {

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

CSS部分

div类

1. 居中问题

div里的内容，IE默认为居中，而FF默认为左对齐

可以尝试增加代码margin:auto

2. 高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象;但在IE中，下面的div会自动给上面的div让出空间

所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;

但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：

.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;

不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离

#box {

float:left;

width:100px;

margin:0 0 0 100px; //这种情况之下IE会产生200px的距离

display:inline; //使浮动忽略

}

5. padding 问题

FF设置 padding 后，div会增加 height 和 width，但IE不会 (* 标准的 XHTML1.0 定义 dtd 好像一致了)

高度控制恰当，或尝试使用 height:100%;

宽度减少使用 padding

但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题

FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign

IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个

FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧

注意是技巧，不是方法：

写好标准头

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div

宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值

先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成: {list-style.:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始;

高度，行高以及顶和底边距都可控制;

宽度缺省是它的容器的100%，除非设定一个宽度

，

，

，， 和

是块元素的例子

display:inline 就是将元素显示为行内元素，元素的特点是：

和其他元素都在一行上;

高，行高及顶和底边距不可改变;

宽度就是它的文字或图片的宽度，不可改变，

，，，，，和 是 inline 元素的例子

2. 鼠标手指状显示

全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题

全部注意补齐 width，height 属性

2. 背景透明问题

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

最好两个都写，并将opacity属性放在下面

本文出自：hi.baidu.com/zaku0080/blog/item/c7acb2f3d7536859342accef.html

浏览器兼容手册网页设计 第2篇

微软表示，标准兼容模式将成为IE8的默认渲染引擎。微软此前表示，IE8已经通过了Acid2渲染测试。微软部门经理迪恩·哈查莫维奇 (Dean Hachamovitch)在博客中称：“我们认为言行一致非常重要，

IE8将标准兼容模式作为默认渲染引擎，足以表明我们正在履行互用性方面的承诺。”

按照微软的计划，IE8将包含三种渲染模式，分别是新加入的标准兼容模式、IE7渲染模式、以及一种用于显示老版本网站的模式。由于微软改变了IE8的默认渲染引擎，那些需要IE8使用IE7渲染引擎的网站需要在代码中加入一个标签。

微软承认，做出这一变化也出于法律方面的考虑。微软首席法律顾问布拉德·史密斯(Brad Smith)在声明中称：“尽管目前没有法律规定应当将哪种模式作为浏览器默认渲染引擎，但这一举措无疑可以帮助我们避开潜在的法律和监管麻烦。”去年底，浏览器开发商Opera已经向欧盟提起诉讼，指控微软浏览器不支持通用网络标准。就在上周，微软因为没有完全执行欧盟做出的反垄断裁决，而再此遭到巨额罚款。

网页浏览器兼容性问题综述 第3篇

浏览器是用于访问网络应用的客户端软件,使用浏览器可以浏览网络上的各种资源。浏览器有多种,如微软的Internet Explorer、Mozilla的Firefox、Apple的Safari等,还有Google Chrome、Opera、Green Browser浏览器、360安全浏览器、搜狗浏览器、猎豹浏览器、傲游浏览器、百度浏览器等。不同的浏览器使用的内核及所支持的HTML、CSS等网页语言标准不同,用户客户端的计算机环境也有所不同(如分辨率不同),造成同一个网页在不同的浏览器上显示效果可能不一致,如网页元素位置混乱错位、导航不能正常显示、内容显示不完整、视频不能正常播放等,这就是网页的浏览器兼容性问题。

随着网络技术的不断发展,浏览器软件越来越多,版本也在不断更新,受这些因素的影响,浏览器兼容性问题越来越突出,指定浏览器的网页必然不能满足差异性用户群体需求,解决浏览器兼容性问题迫在眉睫。

1 浏览器

浏览器(Browser)是一个应用软件程序。用户可以使用浏览器连接到网络,访问网络上的各种资源。浏览器可以根据用户输入的网络地址确定信息资源位置,并将这些资源提取出来,通过解析在浏览器中显示,方便人们浏览。

1.1 浏览器内核

浏览器内核是浏览器的核心,是基于网页标记语言显示网页内容的程序或模块。

浏览器内核分为两部分:渲染引擎(layout engineer或Rendering Engine)及JS引擎[1]。渲染引擎负责取得网页内容(HTML、XML、图像等等)、整理信息(例如加入CSS等)以及计算网页的显示方式,然后输出至显示器或打印机。渲染引擎决定了浏览器如何显示网页的内容及页面的格式信息。JS引擎负责解析JavaScript语言,执行JavaScript语言实现网页的动态效果。

不同浏览器使用的内核及所支持的HTML等网页语言标准不同,不同的浏览器内核对网页编写语法的解释也不同,导致同一个网页在不同的浏览器上显示的效果不一样,这是造成浏览器兼容性问题的主要原因。

1.2 浏览器加载和解析HTML页面流程

以HTML静态网页为例,用户在第一次访问网页时,浏览器加载和解析页面的流程如下:(1)用户输入网址,浏览器向服务器发出请求,服务器返回html文件;(2)浏览器开始加载html代码,若在<head>中引用了外部CSS样式表,就向服务器发出CSS文件请求,服务器返回CSS文件;(3)浏览器继续载入html中<body>部分代码,边载入代码边渲染显示网页内容。如果代码中的网页元素使用CSS修饰,则调用CSS文件中相应的样式渲染该网页元素;(4)若代码中引用了图片文件(如用<img>标签插入图片、背景图片等),则浏览器向服务器发出请求。此时浏览器不会等待图片下载完,而是继续渲染后面的代码;(5)服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排序,因此浏览器需要重新渲染这部分代码;(6)若代码中包含了Javascript代码的<script>标签,则转去执行JS代码。如果是调用外部JS代码,浏览器就向服务器发送JS请求,并会一直等待该请求的返回,收到JS代码后立即执行JS代码。在此期间,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树,所以会阻塞其它内容下载和呈现;(7) 代码中JS、CSS中如有重定义,后定义函数将覆盖前定义函数;(8)依次加载html代码,并按上述规则渲染相应网页元素,直到html文件结束(执行</html>标记)。此时整个页面加载渲染完毕,用户可以看到完整的网页内容。

不同内核加载和解析HTML的过程有所不同,但方法和上述基本相同。

2 浏览器兼容性问题

浏览器兼容性问题有很多种表现,比如边距相差两个像素的宽度、网页元素错位等。文献[2]将浏览器兼容性问题分为渲染相关、脚本相关和其他3类。

2.1 渲染相关的兼容性问题

渲染相关的兼容性问题主要指表现在布局效果上的兼容性问题。

相比表格方式的网页布局,DIV+CSS网页布局更好地实现了网页结构与表现的分离,代码精简,重构容易,目前业界已广泛采用DIV+CSS进行网页布局。不同的浏览器内核、同一浏览器的不同版本对HTML和CSS的支持与解析不同,造成同一网页在不同的浏览器中的效果不同。以下给出几种常见的与渲染相关的兼容性问题。

(1)不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。如列表ul在不同的显示器下默认的边距是不同的。

(2)优先级问题。对同一个网页元素重复设置多种样式时,不能出现理想的效果。这是因为对于同一标记属性所给定的值,有不同的优先级。其中优先级最高的是内联样式,其实是页内CSS,接下来是浏览器默认设置,最后才是外部CSS的限制。

(3)超链接访问过后hover样式不出现的问题。对超链接设置了默认链接样式a:link、鼠标经过样式a:hover、已访问过的链接样式a:visited。对于被点击访问过的超链接,鼠标经过演示不再起作用。比如导航菜单,设置了鼠标经过时改变背景颜色和文字颜色,但是对于访问过的链接,此效果不再出现。

(4)列表项前导图片无法准确定位。默认列表中的每一列表项是用黑色实心小圆点来标识的,而在网页中,这种效果并不美观。一般都会设计一些小图标来标识列表项。在CSS中,列表项前导图片可用list-style-image设置,但是图片的位置设置在不同的浏览器中显示效果不同。

(5)盒模型解析不一致问题。对某个元素同时设置了宽度、边界、填充和边框后,在IE浏览器下宽度正常,但在有些浏览器下,此元素的宽度为宽度和边框之和,导致该元素实际宽度增大,影响后面内容的排列。

(6)DIV高度自适应。如果设置了一个DIV高度,当DIV实际内容大于所设高度,IE浏览器会自动拉伸以适应DIV容器大小,火狐浏览器会固定DIV高度,超过部分因超出了DIV底线之外,出现和下面内容重叠的现象。如果不给DIV设置高度,在火狐浏览器中将不会因为页面内容而撑开,DIV就不会显示;而IE中就会自动根据内容撑开,实际内容有多高,DIV就显示为多高。

2.2 脚本兼容性问题

脚本相关的兼容性问题指在执行JavaScript脚本和DOM时产生的兼容性问题。这主要是由于不同的内核在处理同一件事情时采用的方法不同,编写出来的程序代码也不同,造成同一段代码在不同的浏览器下运行的结果不同,从而导致网页效果不一致问题。以下给出几种常见的脚本相关兼容性问题。

(1)HTML对象获取问题。火狐浏览器中使用document.getElementById("idName")获取HTML中的网页对象,而IE中使用ie:document.idname或document.getElementById("idName")获取HTML对象。 若使用ie:document.idname,则网页在火狐浏览器中不能正常显示。

(2)常量定义方法问题。在火狐浏览器中,可以使用const关键字或var关键字来定义常量,而在IE下,只能使用var关键字来定义常量,导致用const定义的常量在IE中不起作用。

(3)表格操作问题。各浏览器对于table标签的操作各不相同。 在IE浏览器中不允许对table和tr的innerHTML赋值,使用JS增加一个tr时,appendChild方法也不管用。

(4)集合类对象问题。IE浏览器下,可以使用()或[]获取集合类对象;在火狐浏览器下,只能使用[]获取集合类对象。

(5)表单元素获取问题。IE浏览器中,可以使用document.formName.item(”itemName”)或document.formName.elements[" elementName"]获取表单中的某个元素;火狐浏览器中,只能使用document.formName.elements["elementName"]获取表单元素。

3 解决办法

3.1 与渲染相关的浏览器兼容性问题解决办法

目前对渲染相关的浏览器兼容性问题研究大多是针对CSS兼容性问题的。现有的研究方案,主要是通过对浏览器解析CSS的方式进行分析(如文献[3]分析了不同浏览器对CSS1、CSS2.1、CSS3 三个版本的选择器支持情况,文献[4]分析了目前最新的各种浏览器对CSS3 的支持情况),找出产生CSS兼容性问题的原因。根据不同浏览器对CSS的支持及解析结果、CSS中的优先级不同,调整CSS样式。较复杂的兼容性问题则需要针对不同的浏览器写不同的CSS,即CSS hack。董启雄[5]分析了CSS Hack的基本原理,杨玉梅[4]、董启雄[5]给出了CSS hack的基本语法,宋玉伟[6]针对不同的CSS兼容性问题(如内外补丁值、div的居中等)给出了CSS hack的解决办法。

使用CSS hack可以解决常见的CSS浏览器兼容性问题,但使用CSS hack仅仅是为了达到视觉效果的统一,对网页设计来说并不是一种合理的设计思想。从某种意义上说,CSS hack是在割裂CSS的统一。滥用CSS hack会导致更多的浏览器兼容性问题。浏览器升级也会给hack带来问题。同时,CSS hack给网页开发人员带来了繁重的工作量。

3.2 与脚本相关的兼容性问题解决办法

目前对脚本相关的浏览器兼容性问题研究大多是针对JavaScript兼容性问题的。对JavaScript兼容性问题,可以使用JavaScript框架提供的一系列工具和函数,产生跨浏览器兼容的JavaScript来解决。目前常用的框架有Dojo、Prototype、JQuery等。吕毅[7]引入JQuery框架探索了JavaScript兼容性问题解决方法,屈建勤[8]基于DOM模型对网页代码进行了重构。

4 结语

浏览器的兼容性问题是网页开发人员经常会遇到的问题。解决浏览器兼容性问题,有利于网页用户获得良好的体验,无论用户使用哪一种浏览器打开网页,都能看到完整的网页效果,正常使用网页所提供的各项功能。如何更好地解决浏览器兼容性问题,让网页在不同的浏览器下都能将定制的效果完全显示,还需要研究人员和技术开发人员共同努力。

参考文献

[1]浏览器内核的解析和对比[EB/OL].http://www.iefans.net/liulanqi-neihe-jiexi/

[2]百度文库.内核原理和兼容性[EB/OL].http://wenku.baidu.com/link?url=JWFy9JopVXA2lvorO9O0RhttEBY2se5YooT1WJPp EJF5bBtl5us3sKW0rMJ9C4D2o2NMxA4gNyIWLhlIeyd7ZFMMRcJhFq TGVXrmPMWIni,2011-08-22.

[3]杨玉梅.浏览器CSS兼容问题探究[J].计算机与现代化,2013(7):220-223.

[4]CSS3浏览器支持参考手册[EB/OL].http://www.runoob.com/cssref/css3-browsersupport.html

[5]董启雄.对几款浏览器兼容性的测试分析[J].计算机光盘软件与应用,2012(18):66-67.

[6]宋玉伟.CSS浏览器兼容性问题研究[J].电子科技,2012,25(8):147-149.

[7]吕毅.引入JavaScript框架解决Web程序开发中浏览器兼容性问题[J].职业教育,2010(4):67-68.

浏览器兼容手册网页设计 第4篇

关键词：浏览器；兼容；用户体验；WEB设计

也许是不断探索，并急于求成和急功近利的缘故，新技术产品往往总是在不成熟或不完全成熟的状态下就开始推广使用。因此，在使用过程中人们不得不花大量的时间去找问题的原因并解决问题。

随着，浏览器的种类越来越多，往往同样的网页在不同浏览器中的用户体验是大相径庭的，浏览器兼容问题已成为WEB设计制作和开发者非常棘手的问题。

浏览器种类虽多，但目前常用浏览器内核只有四种：以IE为代表的Triden；以Firefox为代表的Gecko；以Safari、Chrome为代表的Webkit；以Opera为代表的Presto。复杂问题简单化，我们只要解决了这四种内核的四种代表浏览器就基本解决了所有浏览器。

先看IE，低版IE用户还比较多，主要是IE8，可利用IE11开发人员工具的仿真功能的文档模式来测试IE不同版本。IE11默认为Edge模式，一方面，想兼容Microsoft Edge；另一方面，通知IE以最高级别的可用模式渲染。IE8及以下版用Quirks模式时导致页面错乱，可用使IE8及以下版用标准模式渲染。还可用适合IE的判断法：<！--[if lte IE 8]>（≤IE8）样式2<！[endif]-->，但样式2与样式1（≥IE9）所指Class或Id名不能重复，否则加上@media screen and（min-width：0px）{样式1}，因为≤IE8不识别此法。以此方法，你可任意定义IE8及以下版达到想要的视觉效果。类似判断如：<！--[if IE 6]>IE6<！[endif]-->；<！--[if gte IE 6]>≥IE6<！[endif]-->；<！--[if IE]>≤IE9<！[endif]-->；<！--[if ！IE]><！-->≤IE9<！--<！[endif]-->。另外，可单独设IE8：@media＼0screen{IE8}，IE7：*：first-child+html .选择器{IE7}，*+html .选择器{IE7}，body*.选择器{IE7}，IE6：html > body .选择器{IE6}。不正确的Doctype声明，可导致不正确显示或不显示，Html5写为<！DOCTYPE HTML>，在IE中，有时可用<！DOCTYPE >代替<！DOCTYPE HTML>而解决。

接下看Firefox，Firefox可识别语句：@-moz-document url-prefix（）{样式}。去掉点击时虚线框：在IE下可用Outline：none，但Firefox不支持，在Firefox下可用：：-moz-focus-inner，注意是两冒号，写法如：#button1：：-moz-focus-inner {border： none；}。

再看Chrome，Chrome如下：@media screen and （-webkit-min-device-pixel-ratio：0）{样式}，常用Position：absolute定位。其中，当left/right/top/bottom的值为负时，在IE和Firefox中有遮盖现象，而Chrome不会，这时需对left/right/top/bottom设置不同值。Safari也可用@media screen and （-webkit -min-device-pixel-ratio：0）{样式}来区别其他，还可用：.选择器{ [；属性：值；]；}（Safari≤7）或同时@media ＼＼0 screen {样式}（Safari≥7），还可用@media screen{@media（min-width：0px）{样式}}（Safari≤6）。

最后看Opera，@media all and （min-width：0）{.选择器{属性：值1}}可把Chrome及Opera和其他分开，二者继续区分可用覆盖法：同时加@media screen and （-webkit-min-device-pixel-ratio：0）{.选择器{属性：值2}}来覆盖前者，值1取Opera所需，值2取Chrome所需。還可用：@supports （-webkit-appearance：none） {}（Opera≥14），@media all and （-webkit-min-device -pixel-ratio：10000）， not all and （-webkit-min-device-pixel-ratio：0） {}（Opera≤11）。

符合用户体验设计的常用规律是居中对齐，下面是兼容的居中方法：DIV内文居中用vertical-align：middle；结合line-height：DIV高，DIV垂直居中：DIV{Position：Absolute；Top： 50%；Left：50%；margin：-DIV高/2 0 0 -DIV宽/2；Width：DIV宽；Height：DIV高；}，DIV水平居中：body居中（text-algin： center；）+DIV居中（margin-left：auto；margin-right：auto；），内DIV对外DIV居中：外DIV（text-algin：center；）+内DIV（margin：0 auto；）。

由于浏览器种类越来越多，WEB标准也在不断地更新变化，我们要坦然面对，当今时代是信息化时代，互联网发展迅速，与数字媒体相关的用户体验设计，也得以推广和重视，我们只有不断学习，不断在实践中积累经验，不断提高自己找到解决问题的新方法的实践和创新能力，我们才能跟上并超越这个时代。

参考文献：

[1]Smashing（德）.Web用户体验设计与可用性测试[M].人民邮电出版社，2014.

[2]昂格尔（美）. UX设计——以用户体验为中心的Web设计[M].人民邮电出版社，2015.

浏览器兼容手册网页设计 第5篇

现在的市场上的浏览器多种多样，百度浏览器、谷歌浏览器、火狐浏览器、猎豹浏览器等，现在很多浏览器分为兼容模式和极速模式，兼容模式主要是为了以防某些网银或网店之类的交易网站出现不能登录的情况，而极速模式以提高网页加载速度体验为主。但是就有很多软件或是一些网页如果不是兼容模式的话，就不能运行或是使用。下面就让我们一起来看看猎豹浏览器怎么设置兼容模式?设置兼容模式教程，

1.【首先打开猎豹浏览器，找到左上角猎豹图标，点击】

2.【在弹出的选项里面找到“选项/设置”，点开】 3.【然后会弹出一个设置界面，找到浏览模式，选择“优先使用兼容模式”】 4.【选择成功后，界面上方会弹出提示：修改以保存。这样兼容模式就设置成功了】

跨浏览器兼容测试有关的大量资源 第6篇

是一个备受欢迎的免费在线跨浏览器测试工具，包含各种平台的各种浏览器，会为你的网站截图，因为太受欢迎，所以要排队。

Netrenderer

针对不同版本的 IE 进行测试，甚至即将包含 IE9。

Browsrcamp

免费版支持 Mac 上的 Safari 3.1.2 测试，收费版本包括更多 Mac 浏览器。

Adobe Browserlab

老牌的跨浏览器测试平台。

Litmusapp

特点是，可以得到一份完整的跨浏览器兼容测试报告，免费版只限于 IE7 和 Firefox 2。

Anybrowser siteviewer

可以按不同屏幕尺寸在不同浏览器中预览你的网页，甚至可以在不同页之间浏览。

Fundisom

一个 Mac平台的网站截图生成工具，支持 Safari，MacIE 和 Mozilla，目前好像宕机了。

Delorie lynxview

看看你的网页在纯文本浏览器 lynx 中的样子。

Browsera

跨浏览器兼容测试有关的大量资源 第7篇

这是一个 Firefox 扩展，可以以新标签的形式，以 IE 引擎显示页面。

IETester

一个免费的多版本 IE 内核浏览器，支持 IE9/8/7/6/5.5，支持 Windows 7，Vista，XP，

IECapt

一个小巧的命令符工具，可以将指定网页在 IE 中的渲染结果输出到 BMP，JPG 和 PNG 图片。

Multi-Safari

多版本 Safari 测试。

Expression Web SuperPreview

不同版本的 IE 测试。

Iphoney

如果你针对 iPhone 320x480 的屏幕进行设计，这正是你需要的工具。

MultipleIEs

针对古董级浏览器 IE3/4/5/6 进行测试。

Multiple IE

和 MultipleIEs 类似，也是针对古董级浏览器进行测试，不同的是，这工具可以让你在同一台机器上运行从 IE6 到 IE3 各个版本的浏览器。

SortSite Professional

一个非常全面的测试工具，可以测试你网站中每个页面，为所有发现的问题生成报告，拥有300个指标。

Lunascape

浏览器兼容手册网页设计 第8篇

关键词：浏览器,CSS,兼容性,内核,hack

浏览器的兼容性对于网页开发者来说无疑是个很头疼的问题, 即便你是个参加工作多年的老手, 也或多或少会在这个问题上徘徊许久。百度一下, 一大堆的问题和解答方法呈现在你面前。然而, 我们要学会总结, 并不是所有东西都是我们目前所需要的, 当然, 我的总结或许对我的益处会更大一些。

首先, 我来阐述一下, 何为浏览器兼容性, 何来浏览器兼容性问题?

这不得不说到浏览器内核, (即:Rendering Engine, 译为“解释引擎”) , 浏览器内核是浏览器最重要或者说核心的部分, 它负责对网页代码的解释 (如HTML、Java Script) , 并渲染 (显示) 成网页。浏览器引擎决定了浏览器如何显示网页的内容以及页面的格式信息, 如果两个浏览器的内核不同, 其内核对网页代码的解释可能就不同, 同一网页在两个不同内核的浏览器中显示的效果可能就会不同, 夸张的甚至无法显示。

浏览器内核很多, 如果加上所有的几乎没有什么人在用的非商业的免费内核, 那么可能大约有10款以上甚至更多, 不过通常我们比较常见的大约只有四种, 下面先简单介绍一下。

Trident:IE浏览器使用的内核, 该内核程序在1997年的IE4中首次被采用, 是微软在Mosaic代码的基础之上修改而来的, 并沿用到目前的IE8。

Gecko:Netscape6开始采用的内核, 后来的Mozilla Fire Fox也采用了该内核, Gecko的特点是代码完全公开, 因此, 其可开发程度很高, 全世界的程序员都可以为其编写代码, 增加功能。

Presto:目前Opera采用的内核, 该内核在2003年的Opera7中首次被使用, 该款引擎的特点就是渲染速度的优化达到了极致, 也是目前公认网页浏览速度最快的浏览器内核, 然而代价是牺牲了网页的兼容性。

Webkit:苹果公司自己的内核, 也是苹果的Safari浏览器使用的内核。

了解了其问题的原因, 那么, 浏览器兼容性问题主要表现在那些方面呢?我们可以把它划分为css差异性和javascript差异性。

在这里, 我们主要讨论的是Css的浏览器兼容性问题。

CSS浏览器兼容性问题又大致包含两种:一、默认值不一样, 如:许多标签的默认maring或padding值不一样;二、CSS书写方式不同, 如:IE, 火狐对伪类和expression的支持不相同……

由于不同的浏览器对CSS的支持及解析结果不一样, 还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。一种叫CSS hack的产物便应运而生, 我们把针对不同的浏览器写不同的CSS code的过程, 叫做CSS hack, 或者叫写CSS hack。

Css hack的写法很多, 比如:IE6能识别“*”和“_”, 但不能识别!important;IE7既能识别“*”, 也能识别“!important”, 但不能识别“_”;而火狐只能识别!important。等等, 诸如此类还有许多。

Css hack书写顺序, 一般是将识别能力强的浏览器的CSS写在后面。不管是什么方法, 书写的顺序都是firefox的写在前面, IE7的写在中间, IE6的写在最后面。

我们举例说明如何用Css hack区分火狐, IE7和IE6:

background:blue;*background:green!important;*background:red

或者

background:blue;*background:green;_background:red

那么, 背景颜色在火狐下为蓝色, IE7下为绿色, IE6下为红色, 由此可见, 使用hack我们可以单独的为一种浏览器书写特定的css, 当你的网页因某种兼容性问题困扰你时, 使用hack问题就可迎刃而解。

下面, 让我就对我所遇见的几个Css浏览器兼容性问题做些试验和总结吧。

1 div高度自适应和border宽度问题

测试代码:

此代码在IE6下实现了我预想要的效果, 如图:

但在火狐下测试结果就不一样了, 测试效果如图:

我们发现在火狐下容器div我边框只在上边出现, 原因是它的高度并没有随子div的高度增加而自动增加, 解决这个问题很简单, 只需在样式Container中加入“overflow:hidden;”就可以了, 即:火狐中浮动的div一定要闭合。

结果如图:

可是, 虽然容器div的高度自适应了, 但和IE的区别是两个子div并没有填充满容器div, 右边留下了空余。为什么呢?

原因在于, 我们给容器div设置了border宽度为4px, border在IE宽度往div内扩张, 而火狐恰好相反, 往外扩张。往内扩张的div宽度没有发生变化, 而往外扩张的则变大了。

我们也可以这样理解:

其实CSS'width'指的是标准CSS中所指的width的宽度, 在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer’width’则是指整个容器的宽度, 包括内容, padding, border。

Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度

IE中:内容宽度=您定义的容器宽度 (Internet Explorer'width') -padding宽度-border宽度。

解决这一问题我们可以使用hack, 比如我们这样定义样式

.container{width:392px;*width:400px;background-color:#cccccc;border:4px solid#000000;overflow:hidden;}

但是, 我们开发网页的思想应该是尽量避免使用hack, 我认为hack的本质不是兼容而是割裂css的统一, 单纯以制造完美视觉效果为目的, 而非创造合理的设计思想。浏览器的升级更新也会对hack的兼容性造成打击

为此我设计了另一解决方案避免使用hack, 代码如下:

这样, 无论你border设置为多少, 使用何种浏览器, border的宽度都是向内扩张, 即容器div宽度总是400px, 另外, 这个设计, 还可以实现padding兼容火狐和IE, 原理和border类似, 因为在火狐中设置padding后div的宽度或高度会加上你所设置的padding值, 而IE将保持不变.所以, 它基本满足我们兼容各浏览器而有没有使用hack的需求。 (注:‘

’的作用是兼容ie6中div高度自适应问题)

由此可见, 网页开发中合理的设计思想是非常重要的。虽然不同的设计都可以实现相同的功能, 但是, 一个合理科学的设计理念不但可以使网页更加整洁, 速度更加流畅, 就连开发周期也会大大缩短, 因为我们常常把更多的时间花在了调试或纠正上。

2 设置1px高度的div问题

测试代码:

在IE6下似乎无论你的height设置为多小, div的高度都会大于某一个数值, 我百思不得其解, 查过资料才明白, 原来在IE6下元素的默认字体尺寸大致在12px-14px之间, 当你试图定义一个小于此默认值高度的div时, IE6将顽固的阻止你的行为, 即使你设置为0px也无动于衷。如果你要问为什么会这样呢, 这大概就要问微软了。当然, 要解决这个问题也不难, 只要你在div样式中设置font-size:0px或者定义overflow:hidden就可以阻止IE的这种自作聪明了。

3 IE6下margin加倍的问题

在ie6中, 如果给设置了float的div设置margin, 它的margin值会加倍, 也许这是IE6中的一个小bug吧。

测试代码:

在火狐和IE6中测试结果为:

开始, 我一般使用hack解决此问题, 为IE6写个独享的“margin, _margin-left:10px;”, 最近发现另一种方法更实用, 给浮动的div样式加上“display:inline;”即可, 原因尚未清楚。

诸如此类的问题还有许多, 我们也不可能一一列举,

对于一个网页设计师来说, 能做到保证你的网页兼容到ie6+, firefox, chrome, opera, safare这几种浏览器, 已经算得上是合格的设计师了。

我希望有一天, 所有浏览器的内核能够统一起来, 共同谋创一条IT可持续发展的科学道路, 那么, 程序员幸甚, 网民幸甚……

参考文献

[1]余苏宁.互联网实用技术与网页制作[M].西安:西安电子科技大学出版社, 2000.

[2]汪赵强.网页制作与JSP技术[M].北京:机械工业出版社, 2005.

让浏览器兼容起来 第9篇

一、IE8以上浏览器的兼容设置

用IE浏览器打开那些不兼容的网页后，单击浏览器窗口右侧的“工具”按钮，选择“兼容性视图设置”，在弹出的对话框中，勾选“在兼容性视图中显示所有网站”。这种设置就可以达到一劳永逸的效果。对于那些在打开时，才出现兼容性问题的网页，可直接单击浏览器窗口的“工具→兼容性视图”菜单，打开“兼容性视图”对话框。这时，会在“添加此网站”下出现该网址，单击“添加”即可。这个网站就会自动保存到兼容性列表中（见图1）。下次再登录这个页面时，IE浏览器就会自动启用兼容性视图。

二、360浏览器（百度浏览器）的兼容设置

用360浏览器打开出现不兼容的网页后，在浏览器地址栏的右边会有一个闪电图标。单击该闪电图标后，选择“兼容模式（推荐）”（见图2），即可正常查看和使用该网页。百度浏览器的兼容设置与360浏览器的操作相同。

三、QQ浏览器的兼容设置

用QQ浏览器打开不兼容的网页后，单击浏览器右上角的“菜单”按钮，依次选择“工具→启用兼容性视图”菜单项，即可正常查看和使用该网页了（见图3）。而QQ浏览器9的兼容性操作则与360浏览器相同。

四、傲游浏览器的兼容设置

用傲游浏览器打开不兼容的网页后，在浏览器的地址栏的右边会有一个闪电图标，单击闪电图标变为标志即可。或者是单击浏览器右上角的“菜单”按钮，依次选择“切换浏览内核：极速→兼容”菜单项，即可正常查看和使用该网页了（见图4）。

五、搜狗浏览器（淘宝浏览器）的兼容设置

用搜狗浏览器打开不兼容的网页后，在浏览器地址栏的右边会有一个“高速”的图标，单击“高速”变为“兼容”即可正常查看和使用不兼容的网页。淘宝浏览器的兼容设置与搜狗浏览器非常相似，只要单击“极速”变为“兼容”即可。

六、猎豹浏览器的兼容设置

打开猎豹浏览器，单击窗口左上角图标，依次选择“选项/设置→基本设置”，找到“浏览模式”，单击“优先使用兼容模式”即可（见图5）。

七、Google Chrome浏览器的兼容设置

首先是安装“IE Tab”扩展程序。打开Google Chrome浏览器，单击浏览器地址栏右边的“白定义及控制”图标后，依次单击“工具→扩展程序”，进到“chrome：//extensions/”页面（见图6）。接着，单击“获取更多扩展程序”，在“Chrome商店”中搜索“IE Tab”，单击搜索到的“IE Tab”列表中“添加至chrome”按钮，在弹出的来对话框中单击“添加扩展程序”即可（见图7）。安装“IE Tab”扩展程序后，用Google Chrome浏览器打开不兼容的网页后，在浏览器的地址栏的右边有一个“E”的图标，单击该图标即可正常查看和使用了。

如果在单击“获取更多扩展程序”时，出现“暂时无法加载该应用”的提示，就需要谷歌访问助手，才能打开Chrome应用商店。根据自己使用的浏览器单击对应版本的谷歌访问助手（这里以360浏览器为例），弹出“要添加‘谷歌访问助手吗？”的对话框（见图8），单击“添加”按钮安装“谷歌访问助手”插件。接着，弹出“谷歌访问助手已安装”页面后，单击“Chrome商店”就可以很顺利地打开谷歌的应用商店。

八、火狐浏览器的兼容设置

打开火狐浏览器后，依次单击窗口的“工具→附加组件→扩展”菜单，打开“附加组件管理器”。在窗口右上角搜索“解雇IE”，单击搜索到的“解雇IE”列表中的“安装”按钮进行下载操作（图9）。安装完成后单击“立即重启”完成组件的安装，再用火狐浏览器打开不兼容的网页时，在浏览器的地址栏的右边会有一个“高速”的图标。单击“高速”变为“兼容”即可。

浏览器兼容手册网页设计 第10篇

CSS 盒子模型负责处理以下事情:

一个 blcok （区块）级对象占据多大的空间

该对象的边界，留白

盒子的尺寸

盒子与页面其它元素的相对位置

CSS 盒子模型有以下准则:

Block （区块）对象都是矩形 （事实上所有对象都如此）

其尺寸由 width, height, padding, borders, 以及 margins 决定

如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）

如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）

处理 block 级对象时，必须注意以下事项:

如果一个盒子的宽度设置为 100%，它就不能再设置 margins, padding, 和 borders，否则会撑破其父容器

垂直毗邻的 margin 会引起复杂的坍塌问题， 导致布局问题（比如两个垂直毗邻的 Block 对象，上面的对象的 bottom-margin 为 40，下面的对象的 top-margin 为 20，则两个对象的间距将是 40，而不是 60 - 译者）

拥有相对位置和绝对位置的对象，拥有不同的行为

在 Firefox 的 Firebug 中显示的盒子模型

★ 一些经典的XSS跨站代码

★ 纯手工皂创意广告词

★ AS签名等一些常用AS代码

★ 该死的“代码就是文档”

★ 跨服口号

★ 跨年夜经典文案

★ 考研科目名称及代码

★ 阻止“云安全”代码

★ 浅谈SEO网页代码优化

浏览器兼容手册网页设计 第11篇

1.打开IE11浏览器，点击右上角的“工具”选项，再选择“Internet选项”;

2.点击界面的上方的“安全”选项卡，然后点击“受信任的站点”;

3.点击“站点”，添加该行的网站，

二、添加兼容性视图设置

1.打开IE11浏览器，点击右上角的“工具”选项，再选择“兼容性视图设置”;

2.将该行网站添加到“兼容性视图中的网站”;

3.关闭IE11浏览器，重新登入。

三、关闭保护模式

1.打开IE11浏览器，点击右上角的“工具”选项，再选择“Internet选项”;

2.点击界面的上方的“安全”选项卡，然后点击“Internet”;

3.把“启用保护模式”的勾选去掉，另外，切换到“高级”选项卡，找到“增强保护模式”，如果前面有勾选并可选的话，请您将前面的勾去掉;

4.关闭IE11浏览器，重新登入，

四、禁用GPU硬件加速

如果用户的电脑是没有独立显卡的老机器，在用IE11观看优酷之类的在线视频时，会出现切换为全屏模式后当前视频就自动关闭的异常状况。这是由于用户 的集成显卡不支持硬件加速导致的，只要将当前的Flashplayer播放插件卸载，并安装10.2及以下版本即可解决。此外，如果用户并不想在以后升级 自己电脑，在进行下面的操作：

1.打开IE，点击右上角的“工具”选项，再选择“Internet选项”;

2.点击界面的上方的“安全”选项卡，然后点击“Internet”;

3.把“启用保护模式”的勾选去掉，另外，切换到“高级”选项卡，找到“使用软件呈现而不使用GPU呈现”选项，如果前面有勾选并可选的话，请您将前面的勾去掉;

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

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

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

2.1 兼容性测试的内容

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

2.2 兼容性测试的方法

采用Firefox5.0.1版本、Safari5.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中没有严格遵守EC-MAScript规范的一些属性和方法不支持, 因此一些能在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) 悬浮告示通知没有移动。有学校的告示通知最初的位置是在版面的左上角, 然后通过移动进行展示。但是告示通知一旦不移动, 很有可能将学校网站首页的导航栏遮住, 从而使得用户无法选择其中某个栏目。其主要有两个原因:

(1) 假设有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;代替。不过在笔者测试的网站中, 有部分网站采用元素id的方式对其赋值的方式也能够使得悬浮告示通知移动。

(2) 部分网站源文件的首行有如下信息:

经查阅网络资料, 这是Dreamweaver网页编辑器自动生成的代码, 用于声明指出阅读程序应该用什么规则集来解释文档中的标记。对于部分高校网站, 如果删除该信息, 则原本不能移动的浮动告示通知能够在Firefox等浏览器中正常移动。

(3) 循环变化图片没有变化。有部分高校同样是由于直接采用DIV元素id名进行赋值, 从而导致DIV元素赋值失败。如:

if (demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端

else{demo.scrollTop++}

还有高校网站由于网页中使用了CSS的RevealTrans动态滤镜, 但是其使用方法如style="FILTER:revealTrans (Transition=1, Duration=1.5) "只对IE有效, 因此在其他浏览器中无法显示切换图片。

(4) 版面中有多余部分。这个主要是由于部分高校的网站采用DIV+CSS布局方法, 不同浏览器对CSS的解释不统一, 因此导致网页的显示效果不一样。某些高校网页是采用TABLE中的TD放置DIV, 并用CSS进行外观控制。在IE浏览器中, DIV的内容能够恰好填充满TD, 但是一旦变化到Firefox浏览器中, DIV中的内容可能会超过原设计的TD, 因此会造成TABLE整个布局错乱。对于这类型问题的解决, 可以参考更多的网络资源。

3 高校主页兼容性改进建议

随着浏览器多元化时代的到来, 网站对浏览器的兼容性问题将会日益突出, 如何使得网站能够兼容不同的浏览器将是所有高校都会面临的一个挑战。因此, 笔者提出一些建议供参考。

(1) 符合W3C标准。W3C是World Wide Web Consortium的缩写。它始于1994年, 是Web技术领域内最具权威的中立的机构, 关于Web的一切标准均由此论坛讨论制定。对于网页是否符合W3C标准, 我们可以通过http://validator.w3.org/提交文件或提交网站URL进行在线W3C验证。

(2) 发布前进行测试。在网站发布前, 我们可以通过一些WEB服务器如IIS、TOMCAT, RESIN等, 建立一个临时网站, 通过不同的浏览器来访问临时网站进行测试。也可以使用一些软件如HTML Toolbox, 或一些网站提供的在线兼容性测试如http://browsershots.org/, 进行测试。

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

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

参考文献

[1]中华人民共和国教育部.教育部批准的高等学校名单、新批准的学校名单[EB/OL].http://www.moe.edu.cn/publicfiles/business/htmlfiles/moe/s245/201106/120640.html

[2]LYNN-ZHOU.Javascript在IE和Firefox中兼容性问题[EB/OL].http://blog.csdn.net/zll01/archive/2009/11/16/4817146.aspx

[3]WAN FON.查看文章[EB/OL].http://hi.baidu.com/wanfon/blog/item/e11551c6544ac5119c163dce.html

[4]CLOUDGAMER.RevealTrans[EB/OL].http://baike.baidu.com/view/2130474.htmlfromTaglist.

[5]JAMES PIE.w3c[EB/OL].http://baike.baidu.com/view/7913.htm