面向不同浏览器的B/S系统兼容性

魏剑新

摘要

充分考虑兼容性问题是确保B/S系统的网页样式和脚本正常运要行最重要的工作之一。通过深入分析不同浏览器内核、版本及其存在的典型兼容性问题产生的原因及表现形式，将网页兼容性问题划分为样式（CSS）兼容和脚本（JavaScript）兼容性问题，通过测试用例给出了典型兼容性问题的解决方法，并通过典型兼容性问题的归纳分析，提出了具有一定普适性的解决思路。

【关键词】浏览器内核 浏览器 网页 兼容性B/S

互联网应用中，网页是人们与外界信息进行交互的常用媒介，对于一个B/S系统的开发设计者而言，网页在不同客户机上的显示美观度，将直接影响着信息传播的有效性。而在网页设计中，保证网页在不同的浏览器中的兼容性却始终是B/S系统开发最重要的问题之一。

由于目前浏览器的多样化，浏览器开发者对于网页国际通用标准W3C（World Wide Web Consortium）的理解又有所不同，导致在不同的浏览器中同一网页呈现出不同的外观与互动效果，甚至可能出现布局错位、脚本失效等情况，这些即是网页兼容性问题。

对于不同浏览器中网页兼容性，国内外已经有所研究。蒋回生（2010）对网页制作中浏览器差异性——样式兼容问题进行了探讨，曾欣（2014）对CSS在各个浏览器兼容性问题及解决方案进行了研究，Whitfield，N.（2012）提出使用HTML-Kit工具消除CSS在不同的浏览器中的兼容性问题。但现有阶段的相关研究仍比较有限，随着浏览器版本的不断更新，品种日益繁多，仍有很多问题亟待解决。

为系统的解决B/S系统存在的浏览器兼容性问题，下面从浏览器内核、不同浏览器版本存在的典型兼容性问题及其解决方案入手，对不同浏览器的网页兼容性问题展开了较为系统的研究，提出了一组具有普适性的网页兼容性解决方案。

1浏览器内核及典型兼容性问题

1.1四种常用浏览器内核

浏览器中的核心部分是“Rendering Engine”，译为“解释引擎”，一般习惯将之称为“浏览器内核”。浏览器内核主要负责对网页进行语法解析和页面渲染。因此，浏览器内核也相当于浏览器所使用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同内核的浏览器里的渲染（显示）效果也可能不同，会产生很多兼容性问题，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核种类繁多，各种免费内核大约有10种以上，其中常用的内核有四种，即Trident、Gecko、Webkit和Blink，融合这四种内核的有不同浏览器，如图1所示。

Trident是正浏览器一直沿用的内核，由于IE浏览器占有较大的市场份额，因此，该内核比较流行，当前相当多网页根据该内核標准进行编写，然而，Trident对真正的网页标准支持不是很好，甚至在2005年出现了与W3C标准发生脱节的情况，这在早期的IE版本中比较明显，比如IE5.5以前（包括IE5.5），直到IE8出现，对应Trident版本4.0，其对W3C标准的支持才有较大提升。

Gecko是Firefox和Flock所采用内核，功能强大、丰富和支持很多复杂网页效果和浏览器扩展接口是该内核的优点，其存在的显而易见的代价是内存等资源消耗较多。

Webkit是Safari采用的内核，优点就是网页浏览速度较快，胜于Gecko和Trident，缺点是对于网页代码的容错性不好，即对网页代码的兼容性较低，会导致一些代码编写不规范的网页无法正确显示。

Blink由Google在2013年发布，是从WebKit内核衍生而来，是Google浏览器Chrome较新版本采用的内核。Google对Blink进行了大量优化，速度和兼容性均得到较大提升。

1.2典型的浏览器内核兼容性问题

1.2.1边距差异

很多标签在不同浏览器下的边距会出现差异，这个问题的原因是各个浏览器的CSS盒模型有所不同，标签默认的margin和padding有所差异。这个是以往最常见的也最易解决的浏览器兼容性问题，现在很多CSS文件开头都会使用通配符*来初始化各个标签的内外补丁，如在CSS中设置*{margin：0；padding：0；}。

1.2.2最小高度

设置较小高度标签min-height（—般小于10px），在IE6，IE7和其他部分浏览器中高度超出自己设置高度。这个问题的产生是由于部分浏览器会给每个标签一个最小默认的行高。即使标签内容为空，其高度仍然会达到行高的默认值。解决方案是给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你设置的高度。

1.2.3Textarea标签

Textarea标签设置width和height后，在IE浏览器中的实际高度宽度与其他浏览器不一致。IE浏览器中，Textarea实际高度宽度=设置的width和height值；而在其他浏览器（如Chrome，火狐等）中，Textarea实际高度宽度=设置的width和height值-padding值-border值。可以通过设置padding=0px；border=0px来解决这个问题。

1.2.4innerText失效

用javascript动态添加文本时，使用innerText在部分浏览器（如火狐浏览器）中失效。火狐中无法识别innerText，但能识别具有相似功能的标签innerHTML。因此，统一使用innerHTML可保证JS代码在不同浏览器中的有效性。

1.2.5鼠标事件

鼠标事件中的event.x与event.y在部分浏览器（火狐，Chrome）下失效。：IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox和Chrome下，even对象有pageX，pageY属性，但是没有x，y属性。解决方法是使用mX（mX=event.x？event.x：event.pageX；）来代替IE下的event.x或者Firefox下的event.pageX。endprint

2浏览器版本及典型兼容性问题

2.1主要浏览器版本

根据浏览器的版本再细分，正浏览器从1995年发布IE1开始到最新的IE12，己经有12个版本之多。其中，当前用户使用较多的是IE6?10，IE7解决了IE6的一个float bug，增强了CSS选择器支持；IE8完全支持CSS2.1和选择器，DOM操作更符合W3C标准，但DOM支持仍不完整；IE9完全支持DOML1，DOML2，Jscript更符合标准，支持ECMAScript5，HTML5，CSS3，SVG；IE10在IE9的基础上，改进了Chakra引擎，使得网页加载速度较IE9更快。HTML5支持上较IE9更多更全面。而其他浏览器，诸如火狐，chrome，Safari等也都经历了很多个版本更新。本质上，每一次浏览器版本的更新，都可能伴随着内核版本上的更新，从而产生对网页源码解析上的差异，对HTML中的一些标签的处理方式也可能产生影响。

2.2典型的浏览器版本兼容性问题

2.2.1默认margin不同

如Body标签在IE8、9、10中默认margin为8px；而IE6、7中默认margin为15px10px15pxl0px。不仅在不同浏览器中标签默认边距不同，不同的IE版本中也有所不同，一样可以在CSS中设置*{margin：0；padding：0；}来解决这个问题。

2.2.2Button默认type类型

Button标签的默认type类型差异，旧版IE默认为button类型，从IE8开始，为了靠拢W3C标准，button的type属性默认值改为submit了，所以一般在使用button标签时，要尽量设置type类型，以适应不同IE版本。若不标明type类型，可能会影响表单提交。

2.2.3CSS3支持度

IE6-8不支持、或者不完全支持CSS3的属性，比如CSS中通过border-radius设置的圆角div在IE6-8中都是无法显示出圆角效果的。如果非要显示圆角效果，有一种思路是利用VML模拟。VML是The Vector Markup Language（矢量可标记语言），是微软自己开发的语言，相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。因此，IE下可用VML做出圆角、半透明、阴影等效果，并兼容不同正版本。

2.2.4使用JS关闭窗口

IE7及以上版本通过JS无法直接关闭窗口，会出现一个“您所访问的窗口正试图关闭”的确认对话框。这需要在关闭窗口的代码window.opener=null；window.close（）；中加入window.open（""，" self"）。这个方法是当前页面的opener赋为空字符串（空字串可不是null，并不是为空），然后关闭当前页，做个按钮来触发这个方法。

2.2.5HTML5兼容性

IE8及以下正版本对较新的HTML5标签的支持是很有限的，导致一些标签无法显示或错位。可以在HTML头部添加以下JavaScript代码实现导入html5shiv包，

<！-[ifIE]>

〈scriptsrc=”http：//html5shiv.googlecode.com/svn/trunk/html5_JS”>

<！[endif]->

上面代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.JS文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个JS文件不能在页面底部调用。

3用例测试

登录

图3：点击之后按钮样式由左图变为右图

针对浏览器的不同内核，本测试采用了4个具有代表性的浏览器，分别是IElO（Trident）、火狐浏览器（Gecko）、搜狗浏览器（高速模式：Webkit）、Chrome浏览器（Blink）；针对浏览器的不同版本，又加入了IE6、正7、IE8、IE9四个版本的浏览器，测试用例使用项目组开发的如图2所示的Java在线测试系统http：//www.java.zjut.edu.cn，以下为典型问题及其解决方案。

3.1登录按钮样式不一致

登录按钮的CSS样式代码如下：

.btn-login{

BACKGROUND-POSITION：Opx

-208px；

COLOR：#fff；

box-shadow：02px5pxrgba（0，28，88，.3）

}

.btn-login：focus{

BACKGROUND-POSITION：Opx

-304px；

COLOR：#b5dlee

}

此代碼效果是当用户点击css样式为.btn-login的“登录”按钮后，按钮背景贴图改变，字体颜色由原来的白色变为灰色。在IE8-10、Chrome、搜狗、火狐下CSS效果如图3所示。

然而在IE6-7中，点击“登录”按钮之后按钮背景贴图和字体颜色未变，仍为图3左边按钮样式。

CSS2.1规范中描述的‘：focus伪类，在CSS1历史规范中均无规定，这导致早期版本的浏览器，如：IE6IE7IE8（Q）不支持：focus伪类。如果在元素上使用了：focus伪类，会使预期的得到焦点时触发效果在IE6 IE7 IE8（Q）中无效。目前较好的解决方案是使用JavaScript绑定onfocus onblur事件模仿‘：focus效果。endprint

3.2弹出新窗口相关代码：

此代码在IE、火狐、Chrome下实现了预期的效果，点击注册按钮之后，可弹出如图4所示的注册小窗口。

但在搜狗发现无法弹出新的窗口，而是产生了一个新的网页选项卡，如图5所示，其中window.open方法中width、height、top、left这几个参数完全失效了。注意到搜狗有“弹出窗口拦截”功能，但是不启用该功能，window.open仍无法弹出新窗口。

搜狗Webkit内核下，会无视该弹窗是否为响应用户鼠标操作的回调（a和input button以及button等点击类交互标签是不被拦截的），而一律强制拦截弹窗。比较折中的解决方案是在JS中判断浏览器类型，在搜狗浏览器中不使用弹出窗口，而采用特定的CSS布局，让注册板块居中，而不是如图5中居左影响视觉效果。

3.3输入框背景色

网站注册页面中的6个输入框，正常样式如图6所示。

然而，输入框背景色在Chrome浏览器中由默认的白色变为黄色，显得与背景灰白色图片不协调。

测试中发现，在第一次输入时不会出现黄色背景，之后则每次均出现，而且在出现黄色背景的同时，Chrome浏览器会根据历史记录自动完成表单。经查资料，这黄色背景其实就是自动表单的标记。

chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input：-webkit-autofill私有属性，然后对其赋予以下样式：input：-webkit-autofill{

background-color：#FAFFBD；

background-image：none；

color：#000；

}

在某些情况下，该黄色背景会影响到预期效果，尤其是在给input文本框使用图片背景时，原有的圆角和边框会被覆盖。

有两种去掉黄色背景的方案，其一是修改webkit-autofill标签，改变其颜色、边框等属性；其二是在form标签上直接关闭表单的自动填充功能，使用html5新标签：autocomplete=”off”。

3.4滚动条样式

Java在线测试网站的考试页面中，通过编写CSS将滚动条颜色改为白色，使其无法看出，但是在搜狗和火狐浏览器中发现原有的CSS配色方案失效了，如图7所示。

这表明在正下可行的CSS中SCROLLBAR标签在搜狗和火狐浏览器中无法生效。究其原因，在Webkit内核下，网页将不调用IE浏览器的滚动栏，而是使用Webkit自带的滚动栏。因此，在webkit内核中，需要重新配置-webkit-scrollbar标签的属性，将其设置为透明或者白色（网页背景色）均可。然而火狐Gecko内核下，无法对其自带的滚动条样式进行重新配色。不过，可以下载一些样式美观的滚动条插件来取代原生滚动条，然后再对滚动条插件根据网站需求进行重新配色。

3.5禁止网页后退

在Java在线测试系统网站的测试模块中，需实现防止在用户交卷后返回做题页面重新做题。IE下通过如下javascript脚本：

window.history.forward（1）；

可有效防止交卷后按“后退”按钮重复做题以达到刷分目的。

在其他浏览器的测试中发现，该脚本在chrome中仍有效，但在搜狗和火狐中则失效。搜狗内核不能返回到做题页面，但是成绩页面中每按一次“后退”都会刷新题目和正确答案，同时成绩反复记录。火狐则可直接返回到做题页面修改答案，然后重新交卷，不过成绩不会因答案的修改而改变，成绩反复记录。测试结果如表1所示。

上述情况，主要是由于搜狗的webkit内核和Firefox的Gecko内核对于JS脚本window.history.forward的支持度不够。在搜狗中，在成绩页面中“后退”到做题页面时，会重新向服务器发送获取新试题的POST请求，所以虽然从做题页面前进到成绩页面，但是试题己经改变，并且重新提交了一次成绩记录。在Firefox中，window.history.forward则完全失效。

基于上述分析，利用客户端脚本将难以解决关于禁止“后退”的兼容性问题，为避免网站前端兼容性差异，最终通过服务器验证来解决该问题。

4测试结果分析

基于上述测试结果，浏览器兼容性差异可划分为CSS差异性和javascript差异性两大类。不同内核的浏览器之间差异性相对较大，javascript差异性更为明显。其主要原因是几种内核对javascript中一些函数的支持度不同。相對而言，同一内核浏览器不同版本之间的差异性较小，主要是CSS差异，由于各版本发布时间的先后，其对应支持的CSS版本也不同，导致了较早期的版本对新CSS标签无法识别。

5兼容性问题的普适性解决方案

总结上述案例，在消除浏览器兼容性差异的方法上，一般可以采用下列几种思路：

（1）给不同浏览器绑定不同CSS和JS。具体而言，可以使用JS中的navigator对象来获取当前浏览器类型和版本；Html中使用例如<！--[iflteIE6]>的hack标签也可对浏览器版本进行判断。

（2）使用javascript脚本实现样式变化。使用JS实现CSS样式变化，从而消除对CSS标签支持度不同的兼容性问题，如6.1登录按钮样式不一致的bug。

（3）取消一些浏览器的特殊效果。屏蔽某些浏览器的特殊效果，以到达各浏览器一致性。一些特殊效果对样式布局产生了负面影响，而实用价值又不是很高，可以考虑剔除。如6.3输入框背景颜色问题。endprint

（4）针对特定的浏览器加特定的标签。在webkit内核浏览器中，很多标签都是使用-webkit开头，如6.4中-webkit-scrollbar标签也可使用CSShack，就是针对不同的浏览器写不同的CSS语言，比如IE6能识别下划线“ ”和星号“*”，IE7能识别星号“*”但不能识别下划线“ ”，而firefox两个都不能认识。

（5）前台功能由后台程序实现。前端JS脚本的某些功能可以通过后台程序实现，从而避免浏览器兼容性问题，如禁止网页后退问题。

6结语

通过深入分析网页兼容性问题存在的原因，从浏览器内核及其典型兼容性问题、不同浏览器版本及其典型兼容性问题等方面入手，对网页兼容性问题作了较为系统的研究，同时采用实例网站对不同內核的浏览器以及同一浏览器不同版本之间进行了兼容性测试，并对结果进行分析，提出了一组具有普适性的网页兼容性解决方案。

参考文献

[1]李秀娟网页在不同分辨率下的兼容性问题浅析[J]计算机光盘软件与应用，2013（01）：202，247.

[2] Arah T. Browser Wars III[J]. PC Pro，2013，227：87-9.

[3] Schmadeka WL. Beginning CSS： Cascading s ty-le sheets for web design[J]. TECHNICAL COMMUNICATION，2008，55：201-201.

[4] BIans i t B D. An introduction to cascading style sheets （CSS） [J]. Journal of Electro-nic Resources in Medical Libraries，2008（05）：395-409.

[5] Herczeg Z，Loki G，Szirbucz T，Kiss A.Va1-idat ing JavaScript guidelines across mult-iple web browsers[J]. Nordic Journal of C-omput ing，2013（15）：18-31.

[6] Richards G，Hammer C，Nardelli FZ，Jaganna-than S，Vitek J.Flexible Access Control f-or JavaScript. ACMSIGPLAN NOTICES，2013（48）：305-322.

[7]刘增杰，臧顺娟，何楚斌.网页布局模式浅析[J].计算机光盘软件与应用，2014（01）：184-185.

[8]曾欣.浅淡CSS在各个浏览器兼容性问题及解决方案[J].赤子，2014（03）：232.

[9] Whitfield N. Frames and coding [Web page des ign] [J]. Personal Computer World， 2007， 30 （08）：140-1.

[10] Wilhite Steve E. Web browsers[J]. Hawaii Dental Association，2011： 21.

[11] Zheng H， Huang H， Zhu LM.2012 FOURTH INT-ERNATIONAL CONFERENCE ON MULTIMEDIA INFOR-MATION NETWORKING AND SECURITY： MINES 2012： A Web Design Mode for browsers to CSS com-patibility issues， Nanjing Univ Sci & Tec-hnol，NOV 02-04， 2012 [C].NEW YORK： IEEE，2012.

[12] Hogarth G.CSS hacks and filters： Making cascading style sheets work [J/ OL]. TECHNI-CAL COMMUNICATION， 2006 （54）：478-479.

[13] Wilson T.HTML5 hacks[M]. ENGLAND： UNIV S-HEFFIELD DEPT INFORMATION STUDIES，2013.endprint