浏览器兼容性

浏览器兼容性（精选5篇）

浏览器兼容性 篇1

0 引言

随着互联网技术在全球范围内的快速发展,Web应用程序的使用在我们的日常生活中变得越来越广泛。现代的Web应用程序内容比较丰富,交互能力强及AJAX和Flash技术的发展,在客户端为终端用户提供了更强大的功能和应用。而且近一些年来出现的浏览器及计算平台越来越多,各具特色。当Web应用程序在不同的浏览器和平台上运行时,Web应用程序在外观、结构和行为上将会产生一些差异。因此跨浏览器不兼容性越来越受到许多开发者及用户的普遍关注。

早期的一些测试工具主要是在不同的客户端平台上为浏览Web应用程序提供仿真环境,比如Microsoft Expression web和Adobe Browser Lab。虽然这些工具提供了一些仿真和可视化的基础设施,但是识别和比较行为差异仍然需要用户去做。Eaton等[1]提出了识别Web页面有问题的HTML标签的方法并手动分类正确和错误的页面,但是现代Web应用程序不仅局限于页面的HTML标签,还包括HTML结构、CSS样式和DOM的动态特征,显然不能满足测试的需要。Tamm[2]提出了一个使用DOM和视觉信息的方法,找出单一页面的布局问题。在截图过程中它要求用户手动改变页面,因此这种技术不适用于动态生成页面。

在国外,一些CBI自动化测试工具应运而生。Choudhary等[3]提出了WEBDIFF工具,结合页面DOM结构和基于计算机视觉技术的视觉比较来检测CBI的结构差异,但它并没有提出检测CBI行为差异的方法。Mesbah等[4]提出了CROSST工具,使用自动化爬虫工具和导航模型比较来检测CBI的行为差异。Roy Choudhary等[5]提出了CROSSCHECK工具,它结合了WEBDIFF和CROSST的两种方法,利用基于错误检测的机器学习[6]技术,更好地检测了CBI的行为和结构差异。在国内,随着我国经济的飞速发展,软件行业对于软件自动化测试的需求与标准越来越高,市场上对出现的软件自动化测试工具日益增多。但是市场上对浏览器兼容性进行自动化测试的工具并不多见,已有的学术研究也没有对CBI检测问题进行过系统性的研究。因此本文基于现有的一些方法对CBI测试提出CBI的方法和框架,并结合我们以前研究的自动化测试工具ATS[7],较好地完成跨浏览器不兼容性自动化测试的工作。

1 背景

1. 1 Web应用程序和Web浏览器

Web应用程序是一种通过互联网能够让Web浏览器和服务器通讯的计算机程序。终端用户可以通过Web浏览器与Web应用程序的客户端进行交互,比如看网页、输入数据和执行操作等。这些交互操作通过客户端向服务器发出请求,然后服务器响应这些请求来更新当前Web网页。Web网页由HTML或XML脚本语言编码而成。它还包括其他的相关资源,比如CSS样式表、客户端代码( Java Script ) 、图像、FLASH等。 最后Web网页被渲染后显示在浏览器上。

Web浏览器是由大量组件构成的相当复杂的应用程序。Grosskurth等[8]提出了几个Web开源浏览器的相关架构。在浏览器所有的组件中,布局引擎是最重要的浏览器组件。它结合了页面的HTML的结构信息和CSS样式表的格式信息,负责渲染Web页面。浏览器在内存中保存页面的DOM表示以便让客户端脚本去动态修改Web页面。布局引擎是跨浏览器不兼容性问题的主要来源之一,因为同样的HTML/DOM和CSS在不同的浏览器中可能产生不同的页面。第二个组件是事件处理引擎或DOM引擎,它主要负责处理用户操作和执行基于浏览器DOM-API的变化。由于各个浏览器的事件处理算法的不同以及支持的DOM-API不同,它也是跨浏览器不兼容性问题的来源之一。因此,同样的用户操作可能引起不同的DOM变化。第三个引起跨浏览器不兼容性问题的来源是Java Script引擎即执行浏览器Java Script代码的运行时环境。因为不同的浏览器的Java Script引擎存在着微妙而明确的差异,会产生不同的行为差异。

1. 2 DOM,Crawljax和ATS

DOM[9]即文档对象模型,是面向HTML和XML的应用程序接口( API) 。该模型定义了HTML文件和XML文件在内存中的文档结构,提供了对HTML和XML文件的访问、存取方法。DOM将整个HTML页面文档或XML数据文档规划成由多个相互连接的节点级构成的文档,文档中的每个部分都可以看作是一个节点。这样一个节点的集合看作是一个DOM文档树,通过这个DOM文档树,开发者可以对文档的内容和结构拥有强大的控制力,同时使用DOM API可以在文档树里十分方便地遍历、添加、删除、修改和替换节点,由此生成丰富的应用形式。DOM与平台和语言是无关的,因而可以在各种平台和语言上实现。

Crawljax爬虫工具是由Java语言编写而成的开放源代码软件,能够自动捕捉和抓取基于AJAX技术的Web应用程序。Crawljax通过一个动态爬行引擎驱动来探测任何基于Ajax Web应用程序。它能够根据DOM状态和状态之间的转换来创建一张状态图。这张推论出的状态图为各种类型的测试分析和测试技术提供了一个强大的工具,比如: 测试生成、基于变量的测试、检测失效链接、非功能测试、检测未使用的代码等。Mesbah等[10]详细介绍了Crawingjax的算法和方法并讨论了Crawljax测试工具的具体实现。

ATS是一个与测试业务无关的平台,可以用于任何测试( 如功能测试、性能测试等) 及测试任何对象,也可以用于软件自动化黑盒测试。ATS支持测试脚本、支持任意的测试项目组合及时间调度、支持在不同的服务器上分布式地运行测试脚本和提供统一友好的用户界面。ATS服务器采用纯Java实现,具有跨平台性特性。ATS是基于J2EE的Struts[11]理论的MVC模式开发,服务器采用了Tomcat服务器技术,客户端采用JSP技术构建Web页面,后台事务处理采用Java Beans技术。ATS采用Web网页编写界面,用户在ATS界面上所有的操作请求发送给Web服务器来处理并采用Struts来构建Web网页及请求处理器,通过Hibernate[12]来进行数据库操作,从而加强ATS系统的健壮性、可维护性、易扩展性。

2 CBI的测试方法

本文的研究方法包括三个步骤: ( 1) 在不同的浏览器运行环境下通过Crawljax爬虫工具自动抓取或捕捉目标Web应用程序,并生成导航模型。这些模型可能包括Web应用程序的一系列的用户交互信息、下载信息、显示内容、窗口布局、链接切换等。( 2) 比较两个不同浏览器应用程序的生成模型,发现它们之间的差异。( 3) 生成CBI报告提交给Web应用开发者,让他们确定原因并解决这些问题。

2. 1 导航模型

导航模型( 记为M ) 是由爬虫工具捕捉Web应用程序生成的,也称为有限状态机。它的状态和转换分别表示终端用户在Web浏览器上所观察到的页面和用户操作( 例如点击控件) 。每一个状态由可编程语言来表示,每一个转换由用户操作的名称来标记。对于每一个观察到的状态和相应的页面,导航模型记录了页面的截图、页面的DOM表示、页面的每一个DOM元素的可视化表示等。为了有效地比较多个导航模型,我们提出了从层次化角度来查看和分析这个导航模型。它的顶层是有限状态机的图表示,我们称它为状态图,它主要捕捉一系列页面操作痕迹比如交替用户操作序列及页面转换。它的每一个状态对应着终端用户在浏览器中所观察到的一个页面。每一条边对应着两个状态之间的转换,由用户操作( 例如点击) 和转换引起的元素标记。第二层是每个状态( 页面) 的完整可编程语言表示,我们称它为页面模型,它描述了每一个浏览器页面的详细信息。以下分别对状态图、页面模型进行了定义。

定义1 ( 状态图)状态图G是一个带有标记的有向图并包含一个特定的始点。它由五元组G( V,E,O,L,F) 表示:

V : 顶点集合

E:有向边集合

O:特定始点

L:字母标记

F : 标记函数

G具有以下的具体特征:

( 1) 每一个标记至多出现在所给定顶点的一个出边上,即在整个图中,尽管有同样的标记出现在几个边上,但没有一个顶点会有两个或多个同样标记的出边。

(2)图G可以有多重边,即e1,e2∈E:s(e1)=s(e2)和d(e1)=d(e2)。

( 3) 每一个节点可由根节点r到达,即图G由单一连结组件组成。

( 4) 图可以是环状的。

特定结点O通常表示始点或Web应用程序的页面。对于边e = ( u,v) ,我们用s( e)表示一个源顶点u,d( e)表示一个目的顶点v; In( v)和Out( v)分别表示顶点V的一组入边和出边。

定义2 ( 页面模型)页面模型是一个带有根节点的有向标记树。它由五元组T( Q,D,R,T,F) 表示:

Q : 顶点集合

D:有向边集合

R:根节点

T:标记集合

F:标记函数

页面模型是构成Web页面的DOM树结构的抽象表示。此模型包括客户端状态的许多信息比如Java Script变量值或CSS的属性等。参数Q、D和R在DOM树中有明显的含义。一个特定节点的标记就是DOM节点的HTML标签名。一组名-值对表示DOM节点的属性。我们使用单一标记对数据进行抽象的表示,以便将这个模型形式化并对其进行等价性验证。

2. 2 等价性检查

从导航模型的层次角度分析,我们将等价性检查分为行为等价性检查和页面等价性检查。它对不同浏览器的生成模型进行匹配比较找出行为差异。以下详细讨论了行为等价的概念及行为等价性检验算法。

定义3( 行为等价)给出两个状态图G1( V1,E1,o1,L,F1) 和G2( V2,E2,o2,L,F2) ,若G1与G2行为等价,记为G1≡ G2,当且仅当存在一个双射函数M: V1→ V2以下都是正确的:

算法1 是匹配一对导航模型M1和M2的整个算法。函数State Graph返回底层状态图,它的值作为输入值传递给函数Trace Equiv Check。如果状态图G1和G2不等价,则返回错误。函数Out Trace Diff ( G1,G2) 从注释状态图中提取行为差异。Trace Equiv Check ( G1,G2) 算法实现了两个状态图G1 和G2 作为一个同构检查的行为等价性检查。OUT( v ) 返回顶点V的一组出边,LABEL( e) 返回边e的标签。函数Lookup( l,edge Set )返回带有标签l的一个边,如果它不存在,则返回null。Dest ( e)返回边e的目的顶点。在G1 和G2 中,假定每个边的匹配字段初始化是false,每个顶点的访问字段初始化都是null。整个算法是深度优先遍历和线性时间的一个简单变体。

算法描述如下:

2. 3 CBI比较

我们在算法2 中给出了对跨浏览器不兼容性问题检测的整体方法。算法的输入值包括目标应用程序打开页面的url,两个被测试的浏览器Br1、Br2。算法的输出值是CBI的列表L 。

2. 3. 1 抓取和捕捉模型

这一阶段是在两个不同的浏览器Br1和Br2中。我们通过爬虫工具Crawljax抓取应用程序和记录终端用户所观察到的行为,分别记为导航模型M1、M2,它们由函数gen Crawl Model ( url,Br1,Br2) 实现。Mesbah等[10]详细介绍了Crawingjax爬虫工具的具体功能实现。

2. 3. 2 模型比较

这一阶段比较导航模型M1和M2并记录它们之间的差异。主要有以下的四种不同的CBI比较:

行为CBI比较

这一步用行为等价性检验比较导航模型M1 和M2 中的状态图G1和G2。我们在算法1 中提到了行为等价性检验算法,从而找出了两个状态图的节点和边之间一对一映射。在算法2 第3 行中函数trace Equiv Check ( M1,M2) 实现了这个功能。这个函数生成两个参数: T和Page Match List。T是来自G1 或G2 的边的列表,这个边不能与其他状态图的相应的边匹配,我们可以表示成行为差异。Page Match List是页面匹配对( Si1,Si2) 的列表,它在下一步中将会用到。

DOM比较

为了比较两个匹配页面Si1和Si2,该算法产生了Si1和Si2中的相应的DOM节点匹配对的列表Dom Match Listi,这是由函数match DOMs( ) ( 算法2 中第5 行) 实现的。我们可以使用WEBDIFF中提到的DOM匹配算法( 见参考文献[3]) 。

在该算法中需要计算两个DOM节点的匹配指数p。匹配指数p是位于0 和1 之间的数字,p值越大,则两个DOM元素表示相同性的可能性就越大。函数match DOMs( ) 就用这个匹配指数来计算DOM的匹配节点。我们可以用以下公式计算匹配指数。给出两个DOM节点分别记为a和b。c表示XPath的距离,d测量不同的属性,e测量DOM不同的动态特性。XPath是在DOM树中从root到DOM节点的一个特定的路径,Levenshtein Distance是两个节点XPath之间的编辑距离。函数max( ) ,length( ) ,和count( ) 分别返回列表中的两个数字的最大值,字符串的长度,元素的数量。属性attributes和domdata是( key,value) 对映射,分别表示DOM节点属性和动态DOM特性。函数count Similar返回两个相等( key,value) 映射对之间的元素数量。使用上面的公式计算获得DOM节点匹配对,找出列表Page Match List中的每一页面对( Si1,Si2) 中的DOM-level的差异性Di。

视觉CBI比较

对于每一对匹配的DOM节点( nj1,nj2) ,比较它们相应的页面元素。若两个节点不同,就把它们加入到视觉差异的V列表中。对于比较两个页面的视觉差异,我们使用x2图像距离来比较相应页面图像的直方图。在CROSSCHECK[5]中有详细的介绍。在算法2 中由函数diff Visual( ) 实现的。

结构CBI比较

为了比较结构CBI( 布局CBI) ,我们可以使用Roy Choudhary等人在参考文献[13]中提到的方法。他们定义了一个模型叫排列图记为A 。主要执行两个步骤: ( 1) 分别从两个不同的浏览器的页面布局中提取排列图A1,A2; ( 2)用等价性检验算法比较两个排列图找出它们之间的差异性。在算法2 第8 行中由函数diff Layout( ) 实现的( 详细算法请参阅文献[13]中的算法1 和算法2) 。

算法2 CBI整体算法

3 CBI的实现和实验结果

3. 1 CBI的架构

如图1 所示,本文的CBI架构主要包括三个组成部分: 模型收集器、模型比较器和报告生成器。

模型收集器接受一个Web应用程序,使用现有的网络爬虫( Crawljax) 工具从多个浏览器提取其导航模型。模型比较器主要是执行各个不同的CBI的比较。报告生成器以HTML的格式生成CBI报告给Web开发者,让他们能够发现CBI并及时找出原因。

3. 2 CBI的自动化测试结构

CBI的体系结构主要由分布执行服务器、屏幕捕捉服务器和Web服务测试三部分组成,如图2 所示。分布执行服务器是整个体系结构的核心部分,主要负责测试脚本执行和测试任务分配。分布式执行引擎主要实现自动化测试、Web服务测试的交流信息和屏幕捕捉信息的交互。屏幕捕捉服务器主要实现捕捉浏览器的接口和组件,然后将消息递交给分布执行服务器。这些信息储存到屏幕捕捉服务器中,并通过消息传递接口传送给分布式执行引擎,经过分析然后将测试内容递交给测试人员,从而了解到浏览器的不兼容性问题。

3. 3 实验结果

在实验中,本文选择了两个不同的浏览器: 火狐浏览器( 版本24) 和IE浏览器( 版本8. 0) ,它们都在Microsoft Window 7 环境下运行。我们随机选取了五个不同的应用程序,它们分别来自不同领域的类型网站,这样能够使测试数据更加合理。如表所示,它包括名称、网址和类型。我们利用现有的WEBDIFF1和CROSST测试方法分别对以下不同的应用程序测试。

表2 给出了三种测试方法的测试数据。这些测试数据由报告生成器生成,并由我们人工统计得出列表2。第一列显示了测试对象的名称,其他几列给出了浏览器不兼容性问题的个数,包括行为差异、视觉差异、结构差异和总数差异。由表2 的实验结果比较表明,我们发现对于WEBDIFF和CROSST测试工具都不能完全地测试应用程序的行为、视觉和结构差异; 而CBI的测试方法能够很好地自动测试和识别跨浏览器不兼容性的行为、视觉和结构差异,并且该方法还能节省大量的时间。例如表2所示的hupu应用程序,它包括1 个行为差异、1 个视觉差异和16 个结构差异,共18 个差异,而WEBDIFF测试仅共有11 个差异,CROSST测试仅共有1 个差异。

4 结语

跨浏览器不兼容性对于Web应用开发者来说是一个常见的问题,研究它们具有重要的现实意义。本文结合现有的一些技术提出了检测浏览器不兼容性问题的方法,并结合以前研究的自动化测试框架,设计出了浏览器不兼容性测试的结构。最后通过实验数据来验证了这一方法,达到了比较好的验证效果。

在未来的工作中,我们将会进一步改进自动化设计系统( ATS) 结构,提高工作效率,更好地满足开发者和客户的工作需要。今后也可以在不同的平台上( 桌面平台、移动平台等) ,对跨平台的不兼容性进行研究。

摘要：随着Web应用技术的快速发展及浏览器和平台数量的不断增长,跨浏览器的不兼容性问题显得越来越突出。尽管现有的浏览器不兼容性测试工具较多,但是大多数的测试工具是手工测试,耗时过长,容易出错,而且国内对于跨浏览器不兼容性的自动化测试问题缺乏系统性研究。因此基于爬虫工具生成应用程序的导航模型,以及等价性检查技术和自动化测试系统(ATS)提出一种检测跨浏览器不兼容性问题的方法,并结合已有的测试工具进行比较。实验结果表明,该方法能够有效地自动识别和测试跨浏览器不兼容性问题。

关键词：跨浏览器不兼容性,爬虫工具,导航模型,等价性检查,自动化测试系统

浏览器兼容性 篇2

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

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

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

浏览器兼容性 篇3

Web标准提出将网页的内容和表现分离,要求使用结构良好的HTML文档来描述网页内容,而网页的具体效果则使用CSS层叠样式表来描述。随着Web标准的普及,网页排版技术已从原来的表格布局转变为主流的DIV+CSS网页布局。相比于表格方式的网页布局,DIV+CSS网页布局更好地实现了网页结构与表现的分离,代码精简,重构容易,更符合Web标准的设计理念。与此同时,浏览器软件种类越来越多,浏览器兼容性问题日益突出。不同浏览器或同一浏览器的不同版本对HTML和CSS的支持与解析不同,导致同一网页在不同浏览器中的显示效果不同,出现如网页元素位置混乱错位、导航不能正常显示、内容显示不完整、视频不能正常播放等情况。

浏览器兼容性问题已成为网络应用开发者面临的一个严峻考验。传统的CSS Hack本质上是在割裂CSS,且不能向后兼容,后期维护繁琐,已经不能满足浏览器软件的多样性要求。本文以<ul>标签为例,探讨了一种通过调整CSS设置解决浏览器兼容性问题的方法。

1<ul>标签基本概念

<ul>标签是HTML中的无序列表标记,主要用来描述未进行编号的列表,每一个列表项使用<li>标记进行描述。每个列表项前的项目符号可以通过type属性值进行指定,分别为disc(实心圆圈)、circle(空心圆圈)、square(实心方块)[1]。默认项目符号为实心圆圈。

在DIV+CSS网页布局方式中,ul无序列表的用途主要有以下两种:1制作导航菜单。可以使用ul标记结合CSS制作网站主导航菜单,通过CSS可以描述丰富的导航显示效果;2制作新闻列表效果。ul以列表方式描述多个网页内容,可用来实现新闻列表、文章列表等效果。由于ul项目符号较为单一,可通过CSS调整其项目符号的显示效果。

2<ul>标签+CSS制作导航菜单的浏览器兼容性问题分析

2.1采用ul+CSS制作导航菜单的方法

以图1所示导航菜单为例,HTML代码描述如下:

CSS设置如下:

2.2导航菜单制作中的浏览器兼容性问题及解决办法

用ul+CSS制作导航菜单时常见的兼容性问题主要有以下几点:

(1)ul的默认边距问题。不同浏览器对列表ul所具有的内外边距属性具有不同定义,在不同显示器下的默认边距不同。需要设置ul的CSS属性margin:0px;padding:0px,以去掉默认的边距设置,从而保证在不同浏览器中的ul边距一致。

(2)垂直居中问题。在CSS中,垂直居中可以通过vertical-align:middle来设置,但在IE浏览器中达不到效果。因此,可以通过设置行高来解决该问题,此处设置line-height:40px。经过测试,这种垂直居中方式既简单,又可以保持在不同浏览器下的兼容性。

(3)超链接hover样式不出现的问题。对超链接设置了默认链接样式a:link、鼠标经过样式a:hover、已访问过的链接样式a:visited。此处导航默认链接样式为白色字、无下划线。当鼠标经过时,设置了链接样式为淡蓝色背景、蓝色字、无下划线。但如果把.nav ul li a:hover样式放在.nav ul li a:link之前,鼠标经过样式则不起作用。这是因为在CSS规范中,超链接样式的排列顺序:L-V-H-A,即a:hover必须出现在a:visited之后,否则会被隐藏[2]。

此外,若需要在鼠标经过时改变背景颜色,需设置a:hover样式的显示属性display为block,并设置区域宽度和高度,否则将仅在文字下方出现背景颜色。

3<ul>标签+CSS制作列表内容的浏览器兼容性问题分析

3.1采用ul+CSS制作列表内容的方法

以图2所示列表内容为例,HTML代码描述如下:

CSS设置如下:

3.2列表内容制作中的浏览器兼容性问题及解决办法

制作列表内容时,同样会遇到制作导航菜单时提到的3个浏览器兼容性问题,解决办法类似,本文不再详述。此外,还可能出现以下浏览器兼容性问题:

(1)ul边框问题。在案例中,每个列表项li高度为30px。ul整体高度设置为150px时,IE6中边框正常,而在IE8、IE9及google chrome中,底部会有两条线,如图3所示。出现此问题的原因主要是盒模型解析。根据盒模型,一个元素的实际大小是边界、边框、填充、内容的尺寸之和。案例中li有1px的下边框,导致ul高度超出150,超出div的高度。IE6中,div会自动被撑开,所以看到的边框正常。而其它浏览器的div不会被撑开,所以看到两个下边框。

解决办法有两种:一种是将li的下边框高度加入调整外层div,调整.news的样式高度为155;另一种是li的高度在原有高度上减去下边框高度,调整为29。

(2)列表项目前导图片问题。ul中可以通过type属性设置列表项目符号,但3种符号均不能很好地满足页面设计需要。可以通过设置CSS中列表的前导图片liststyle-image属性实现自定义列表项目图片。但在li前设置图片时,图片与其后的文字对齐会出现兼容性问题。

该问题可以通过背景定位和字符缩进的方法来解决,即把前导图片作为li的背景,通过背景图片的位置来控制图片位置,同时设置文字缩进。案例中的相关设置如下:

即背景图片不重复,水平位置和垂直位置为10px,文字缩进30px。该方式可有效解决前导图片定位的兼容性问题。

(3)li中的内容溢出时以省略号显示问题。在网页布局中,每块内容的大小固定。如果内容超出元素大小,一般会设置溢出隐藏。但设置溢出隐藏后,在IE6中元素仍然会被撑开,这是由于在IE6中如果无法将内容放入固定宽度或固定高度的框中,则元素会扩展以适应内容,而不是让内容溢出元素外。设置li的宽度可解决该问题。

而有时列表项目li中的内容不能在一行显示完,这时可以在超过长度时以省略号显示。可通过设置li的CSS属性进行调整。案例中与此相关的设置如下[3]:

此方法适用于IE、Google、Safari浏览器,火狐浏览器不支持。

4结语

本文通过对DIV+CSS布局中使用<ul>标签制作导航菜单和列表内容两个方面的测试,分析了<ul>标签存在的浏览器兼容性问题成因及解决办法。与CSS Hack相比,通过调整CSS设置来解决CSS浏览器兼容性问题的方法效率更高,且代码简洁,后期维护方便。

参考文献

[1]张洪斌、刘万辉.网页设计与制作(HTML+CSS+JavaScript)[M].北京:高等教育出版社,2013:59.

[2]马浩,文福安,孙燕莲.<a>标签浏览器兼容性问题的探讨[C].Third International Conference on Education Technology and Training(ETT),2010:201-204.

[3]CSS对浏览器的兼容性技巧总结[EB/OL].http://www.jb51.net/css/34221.html.

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

这是一个 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

浏览器兼容性 篇5

关键词：网页设计,浏览器,兼容问题

随着网络技术的不断发展, 网络上的各种网站也在不断增加, 内容更加丰富, 功能更加强大。但对于网络开发者而言, 为了给用户更好的上网体验, 解决浏览器兼容问题依然是一个不小的挑战。而且网页设计是技术和艺术的组合, 在设计师考虑到美观的同时还要考虑笔记本、平板电脑和手机兼容问题, 网页设计已呈现新的发展趋势。

1 浏览器与网页兼容存在的问题

众所周知, 上网的时候一般是通过浏览器来实现的, 所谓的浏览器就是指能显示网页服务器或文件系统的HTML文件内容, 可以确保用户与该类文件进行交互。不同的浏览器之间的内核是不同的, 这就导致同一网页在不同的浏览器中的效果出现差异, 甚至不能够正常显示。目前一些网站的设计还没具备兼顾各种浏览器的能力, 通过少数的浏览器打开网页时会出现变形、无法访问、显示不全和图片不动等现象。对于这种问题, 网页开发人员把设计好的网站要放在不同的浏览器上检测其兼容性, 对出现不同的情况要通过有针对性的方法来解决。

多数的网站设计人员采用CSS来展开布局进行设计的。目前, CSS3把CSS划分为不同的模块, 功能也不断强大, 网页设计也更加方便, 不管是主流的门户网站还是各种小公司甚至个人的小站, 也都是通过CSS进行展开设计的。曾经, IE占据了浏览器的主流地位, 但随着互联网科技的不断发展, 浏览器的各类呈井喷趋势, 如搜狗、360极速、百度都在推出自己的浏览器, 而且还占领了一大块市场份额, 与此同时, 谷歌、火狐、3435等浏览器也在市场上占有重要地位。各种不同的浏览器所使用的内核也是不同的, 这导致很多网页浏览器不兼容, 因为是浏览器的内核负责对网页语法进行解读并渲染网页。因此, 浏览器的内核不同, 对网页的语法解释也是不同的, 同一个网页在不同的浏览器下的显示也是不同的, 这就是我们所说的网站设计和浏览器的兼容性问题。如果网页和浏览器的兼容性问题处理不好, 可能会导致浏览器对网页内容解读错误, 出现乱码、变形、信息错乱等现象, 影响页面的美观和使用。

2 几种网页与浏览器兼容问题的解决方法

2.1 采用Hack技术实现浏览器的兼容性问题

所谓Hack技术就是利用不同浏览器对CSS样式支持不同的特点, 针对不同浏览器分别重复定义多个不同的样式表, 由浏览器各自解析执行自己支持的样式, 从而设计出不同浏览器具有相同显示效果的页面。目前最常用的方法是利用浏览器对加入特殊字符的选择符或个别样式的支持、不支持重复定义不同的样式。对个别浏览器有特别显示效果的样式, 如果个别浏览器有自己单独支持的隐藏样式, 则先针对大多数浏览器定义通用样式, 之后再用个别浏览器单独支持的隐藏样式重复定义该样式, 使得大多数浏览器使用前者, 个别浏览器用隐藏样式覆盖后单独使用后者。如果个别浏览器不支持大多数浏览器使用的样式, 则先针对个别浏览器定义样式, 之后再用个别浏览器不支持的样式为大多数浏览器重复定义该样式, 使个别浏览器使用前者, 大多数浏览器覆盖后使用后者。

2.2 不同浏览器页边距不一致问题

比如在CSS中写一个margin—left:588px, 经过测试人们了现在IE8和火狐浏览器的显示效果民相同的, 但IE6中显示就会出问题, 主要表现就是页边距会相差几个像素, 这就影响了网页的美观。这种现象产生的原因是不同的内核对网页的解读不同导致的, 也就是渲染机制不同。不同的厂商对CSS的解释是有一定的差异的, 同一个厂商不同的版本对此也可能出现不同的解释, 正如上面讲到的IE7和IE8对同一问题的渲染是不同的。另外, 浏览器和CSS和版本一直处于动态更新之中, 这也是导致二者经常无法兼容的因素。对这一问题的解决可以对不同的浏览器书写不同的标准。例如:

如此设计, 所有浏览器的显示就会处于相同的状态。

2.3 IE6对hover的不兼容性

在做网站设计时, 设计师通常是用<ul><li></li></ul>来实现不同级别菜单的设置的。在一些精致的网站中如果把鼠标箭头指向某个导航部位会让箭头显示hover效果。这种显示在IE7和IE8中是没有问题的, 但通过IE6打开时会出现无法兼容的现象。如果IE6要达到这样效果就必须利用就javascript编写函数来协助完成。这需要创建一个hover.htc文件, 该文件使用js脚本来定义元素的样式, 如果检测到hover, 就给元素设置onmouseout和onmouseover事件, 从而实现hover的效果。如此以来, 在IE6中运用hover就不会出现问题。

3 结语

本文只是简单介绍几种解决网页和浏览器的兼容方法, 随着网络技术的不断发展, 浏览器和网页的不兼容问题可能会更加突出。要想从根本上解决这个问题, 还要从浏览器的内核着手。只有不同的厂商使用统一的CSS标准, 才能从根本上解决网页和浏览器的兼容问题。

参考文献

[1]李灵华, 李秀静.IE与Firefox浏览器CSS兼容性的解决方法[J].大连民族学院学报, 2012 (14) .

[2]巩恩伟.CSS在浏览器中的兼容性及使用技巧[J].电脑知识与技术, 2013 (6) .