Web 前端开发中的浏览器兼容性问题研究

王雪峰,陈兴稣

(伊犁师范大学 网络安全与信息技术学院,新疆 伊宁 835000)

0 引言

现如今,电子商务的发展使人们对网上办公和办事的需求越来越高。人们对网站的需求促进了网站的层出不穷,并且逐渐呈现多元化的态势。浏览器的种类随着需求增多也变得多样化,而不同的浏览器有不同的内核,这就导致相同网页在不同浏览器显示的效果不同,有些甚至大相径庭,如版面显示不正常、部分功能显示不全等。对于网站的设计者和开发者来说,最为首要也是最难的任务之一就是解决浏览器兼容性,以保证同一网站在每一个浏览器前台中打开后所呈现的网站内容都是一致的,这也成为网站建设方面经久不衰的课题。本文首先从现阶段常见的火狐、Chrome、百度、360 等浏览器入手,介绍各个浏览器内核情况、分析其浏览器的不兼容问题,接着主要探讨浏览器的渲染相关兼容性和脚本兼容问题[1-2],并对发生的不兼容问题的原因进行分类和具体分析,最后有针对性地提出了解决浏览器不兼容问题的方法。

1 浏览器兼容性问题产生原因

1.1 浏览器内核

浏览器全称网页浏览器,是用于检索并展示万维网信息资源的软件应用程序。用户可以通过浏览器连接网络,通过网络地址确定信息资源位置、访问网络上的信息资源,解析到网络页面上,并提取出来。信息资源可为网页、音频、视频、图片、文字以及其他可见信息[3]。

浏览器可以分为浏览器外壳、内核两部分[4],其中提供操作界面、参数设置的外壳种类繁多因此重要程度低,内核部分才是浏览器的核心。用来标记语言、显示内容的程序模块内核主要分为渲染引擎和JavaScript脚本引擎两部分,浏览器内核用来识别网页中HTML、XML、图像等内容,通过程序模块整理网页中加入的CSS 等信息,在显示器上把网页呈现出来。不同的浏览器内核解析同一个网页语法时会出现不同的渲染效果,所以用户选择不同浏览器查看同一网页时会出现兼容性问题。

目前,市场上常见和常用的浏览器内核可以分为Trident,Gecko,Blink,Webkit4 种。

(1)Trident:又称MSHTML,是IE 浏览器一直使用的内核。微软公司在Mosaic 代码的基础上修改而来并在IE 浏览器中沿用至今,因为内核的开放性,曾脱离了W3C 标准,而且内核有漏洞,导致了安全性低,并且不是开源的,只适用于Windows 平台,存在很多兼容性问题。国内猎豹浏览器、百度浏览器、360 极速浏览器都使用了该内核。

(2)Gecko:即Mozilla Firefox 内核,最大的优势是开源和跨平台,在Windows,Linux,Macos X 等操作系统中都能运行,代表作是火狐浏览器。

(3)WebKit 内核:由KHTML(Kool Desktop Environment)系统开发的HTML 网页排版引擎之一发展而来,是苹果公司自主研发的内核,也是Safari 浏览器使用的内核。此内核具有高速、遵循W3C 标准的特点。苹果产品中常见的浏览器都是采用WebKit 内核。Google Chrome,Opera 及各种国产浏览器高速模式也使用Webkit 作为内核。

(4)Blink 内核:是由Google 和Opera software 于2013 联合开发的排版引擎。现在依然活跃的Chrome浏览器的内核是Blink,谷歌还开发了自己的JS 引擎即V8,它能够极大地提高JS 的运行速度。

1.2 浏览器兼容性

本文所说的浏览器出现的兼容性问题,是因为浏览器采用的浏览器内核不同。而不同的内核解析同一个网页的代码时会出现不同的渲染效果,这就造成了显示屏上网页页面显示不相同。例如:字高度不受控制、字间距不受控制、图片间距不受控制、图片透明性的问题等众多兼容性问题。研究浏览器兼容性问题的最终目的在于:无论用户用什么浏览器来访问网站或者登录系统时,都应该得到统一的检索效果。

不同的浏览器所使用的内核及支持的HTML,XML等网页语言的标准不同,因此不同的浏览器内核能支持的网页编写的解释也不同。这会导致同一网页在不同浏览器上显示效果页面布局效果不一样,这是造成浏览器兼容性问题的主要原因[5]。现今常见的浏览器的渲染引擎(又称排版引擎)和脚本引擎如表1 所示。

表1 浏览器渲染引擎和脚本引擎

2 浏览器的渲染相关兼容性及解决方法

渲染相关的兼容性问题又称样式相关的问题,发生的兼容性问题都体现在页面布局效果上[6]。在CSS,HTML 渲染相关的问题主要为字高度、间距、居中等问题。例如网页代码中运用了 text-align :center 将网页设置成水平居中,IE6,IE7 浏览器的访问下确实达到了按照设置显示的效果,但同样的网页代码,在IE8或者火狐浏览器下显示的文本有居中,可其他嵌套块元素并未居中。网页出现字高度、间距、居中等不兼容问题都是因为Web 的排版标准CSS 不同,目前的CSS已经有数多版本。

如果浏览器的内核不一样,浏览器对标签的解释会有自己的规则,不同浏览器对CSS 的支持、解析加载都不一样,导致不同浏览器页面显示效果不一致。为了使同一页面在不同浏览器上呈现一致的效果、消除浏览器解析差异,本文选用CCS hack 方式来使CCS 兼容不同的浏览器。

(1)块级元素设置问题描述:块级元素同时设置了float 和横向的margin 属性后,横向外边距比设置的值大,会出现原先内容放不下而挤到下一行的现象,设置float 布局是最常见的浏览器兼容问题。

解决方案:因为float 和横向的margin 属性同时设置后,横向间距在不同内核解析是不一样的,所以就出现了基本上每个浏览网页的用户都遇到过的兼容性问题。用户只需在网页代码中设置float 标签样式控制时,添加一行display:inline;代码,将原先的内容都转化为行内元素,这样就不会出现因为横向间距不同而造成显示效果不同的情况。

(2) 行内属性标签设置问题描述:设置属性display:block 后采用浮动float 布局,又有横向间距的margin 的情况下,IE6 显示网页文本字体出现间距不一致的bug。运行后出现IE6 里的间距超过设置的float布局间距的现象。

解决方案:在原有设置属性display:block;的代码后面添加上 display:inline;display:table;代码。解决上面的兼容性问题提到块级元素设置时,加上display:inline 的话,本身的行内标签转变成行内元素,此时高宽就不可设置了。这时候用户还需要在display:inline后面加入display:table 代码,这样既可以显示为行内元素,又可以设置高和宽。

(3)网页版面中无法定义1px 左右高度的、使用率低而被忽略的容器,在IE6 下这个问题是因为默认的行高造成的。

解决方案:代码部分加入overflow:hidden,zoom:0.08,line-height:1px 等语句的其中之一就可以得到解决。

(4)form 标签、ul 标签等在IE 中,将会自动设置margin 的边距,而在Firefox 中margin 边距值则是0。

解决方案:如果想显示一致,在原有的设置属性上,CSS 中指定margin 和 padding 属性,CSS 中一般先设置全局属性 *{margin:0;padding:0;},先将标签的不同边距都设置为0 或者其他的固定值。

3 浏览器脚本兼容性及解决方法

由于各类型浏览器内核不同,在前端网站设计中所使用的脚本代码不同,对所发生的事件也有不同的处理方式。因此对同一段脚本文字命令解析不同会出现页面显示效果不统一或者脚本执行错误的情况、客户端检索过程中网页的部分区域出现乱码[7-8]。

解释脚本兼容性问题,使用者要把同一脚本文件放在不同的浏览器中运行。例如以下几个简单的例子可以说明:

(1)在IE 系列中,event 对象有 x,y 属性,FxExplorer(以下简称“Fx”)浏览器中则没有;

(2)在IE 系列中可以用window.testFrame 取得该frame,Fx 浏览器中不行;

(3)在IE 系列中不能使用const 键字。如 const constVar=32;代码在IE 浏览器中运行就是语法错误;

(4)在Fx 浏览器中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 就没有问题。

浏览器的脚本兼容性一直是开发者和使用者特别注重的问题。不同浏览器对同一段代码的不同解析导致浏览器不兼容,解决脚本兼容性问题还要考虑到不同浏览器的不同cookie 钥匙。主流的浏览器如IE,Chrome,Opera 的cookie 是可以保存Unicode(统一码)字符;火狐浏览器(Firefox)则是先保存中文字符内码,而后在检索空闲时将它转换为Unicode 字符来存储;Safari 浏览器会忽略包含中文字符的键值对。浏览器在设置和读取cookie 时,对字符进行编、解码操作时把字符串编码为 URI 组件,推荐使用encodeURIComponent()对字符进行编码和使用decodeURIComponent()对编码后的字符进行解码,有以下几种情况。

(1)浏览器中如IE,Firefox,Opera 在自定义提交方式下不会提交普通按钮及提交按钮的键值对信息;而Safari,Chrome 浏览器会将这些信息也提交给服务器端。

解决办法:通常情况下,服务器端不需要按钮的key/value 信息,HTML 网页中的提交按钮(submit)在提交之前会被浏览器定义了name 值,服务器上一样可以得到它的 name 值和value 值,建议删除按钮的name属性,使其无法成为有效的表单元素,服务器上就得不到name 和value 值,从而不能提交submit 的name属性值。

(2)Content-Type 用于指示资源的MIME 类型,后面往往跟着字符串或者文档文件,代表着服务器端发送给客户端浏览器的具体数据类型,浏览器将根据这个信息决定如何处理得到的数据内容,如:Contenttype:text/html 表示这是个HTML 文件,需要渲染引擎解释内容后输出;Content-type:application/octet-stream表示这是个二进制流,需要下载到本地后由用户端环境决定如何使用。

每个浏览器内置支持的Content-type 类型表各不相同,这导致了某些类型字符串在某些浏览器下不被识别;另外,如果出现错误的Content-type 类型,各个浏览器又会以不同的方式处理。

解决办法:这个问题比较复杂,如需避免出现显示异常的情况,建议不要使用非法的Content-Type 头字符串;并且文件实际内容和数据格式应与Content-type 头字符串内类型声明一致。

(3)在浏览器IE6,IE7,IE8 中,若一个页面被打开时接收到的响应头的Content-type 为text/plain,浏览器会尝试嗅探页面文件内实际内容来判断是否可能为一个HTML 文档,若是则会以text/html 的方式将页面作为HTML 文档解释,而不是将其作为纯文本内容处理。

解决办法:这是由IE 浏览器的特有内容嗅探机制导致的,故在不修改服务器端代码的情况下,无法通过常规办法解决此IE 特性问题。合理、正确地设置文档的Content-type 是最佳的解决方案,同时应避免在非HTML 文件中出现可被IE6,IE7,IE8 嗅探机制捕获的HTML,BODY,HEAD,TITLE 标记书写格式。

(4)IE6 浏览器不支持Really Simple Syndication(RSS),RSS 是同步网站内容的一种标准,使用浏览器打开响应头为application/rss+xml 的内容会当做二进制文件而提示下载;Chrome 浏览器会将application/rss+xml 以纯文本处理而显示出源代码。

解决办法:各浏览器对于RSS 的支持及渲染方式为浏览器各自实现,故无法通过常规办法使各浏览器达到一致的效果,对于暂不支持RSS 的浏览器应给予提示。Chrome 浏览器可通过安装扩展插件实现此功能。

(5)浏览器IE6,IE7,IE8 这3 个版本在调整的过程中,始终不在使用META 元素控制跳转时附加Referer(HTTP 请求Header 的一部分)字段到请求头中。在普通页面中,当脚本调用location 对象进行跳转时也不会附加Referer 字段信息。

解决办法:若服务端需要获得正确的Referer 字段信息,则应采用各浏览器均可以附加Referer 字段信息的方式进行跳转。例如普通超链接、表单提交、HTTP 302 跳转等。

4 结语

本文主要针对不同的浏览器内核,主要有4 类Trident,Gecko,Blink,Webkit,对现有常用的浏览器IE、火狐、Chrome 的渲染引擎和脚本引擎进行分析;针对渲染引擎造成的兼容性问题,主要分析了4 种情况下的CSS 设置版面布局问题,并给出了解决方法;针对脚本引擎造成的问题,主要分析了5 种主要情况,并给出了相应的解决方法。通过浏览器的渲染兼容性和脚本兼容性的分析,给出了Web 前端网站设计应该解决的版面布局问题,解决了同一个网站在不同浏览器中显示效果不一致的问题。