浏览器兼容（共5篇）
浏览器兼容 篇1
1. 引言
网页设计遇到最大的麻烦之一莫过于不同浏览器的兼容性问题了。所谓浏览器兼容问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在一般情况下,我们的需求是,无论用户用什么浏览器来查看我们的页面或是登陆我们的系统,都应该是统一的效果。用什么方法可以有效解决浏览器兼容问题呢?可能很多人会认为可以使用CSS Hack技巧,运用这种技巧后,在定义一个class时就会根据不同的浏览器,对同一种属性做多次定义。通过这种做法能够满足不同浏览器的需求,但是在代码上看起来就比较繁琐。遇到用普通的CSS样式解决不了的问题时,我比较喜欢用js函数来解决,这样既可以不让代码看上起那么繁琐,也可以锻炼自己的编程能力。
2. 浏览器兼容问题分析与实现
2.1 兼容问题的产生分析
在做页面调试时,有的时候在IE中显示正常,但是放在火狐浏览器中就不能换正常显示。遇到这种问题我们大多数人的第一反应就是CSS样式的问题,我们就会针对CSS样式来做修改,很多时候这会耗费大量的时间,可能最后得到的效果并不是十分的满意或是根本没有解决问题。在工作中,曾遇到这样一个问题,表格中显示的文本是非汉字的文本,在火狐浏览器中文本换行就出现问题,当遇到一个单词的长度超过所定义的列宽时,就会将整个表格撑开。下面就对这样问题做一下详细的表述。
页面中使用的是JSF
对于汉字的换行来说比非汉字的换行在实现方面要简单。此处以列内容为非汉字的表格做说明。在IE浏览器中,我们需要在
2.2 初步解决办法
在CSS样式解决不了的情况下,就想到用js来实现,假设表格的第一列的宽度可能会超出所定义的宽度,js实现代码如下:
用js代码实现部分,就是做了一个截取字符串的操作,如果字符串的长度大于所限定的宽度(假设此处的最大长度为20),就按照一定的长度来截取字符串,并在每一段截取的字符串的后面加上一个空格,这样就能够保证自动换行。在做截取之前,先判断所用浏览器的是否是IE浏览器,如果是的话就不需要做这些操作,IE浏览器对于这些属性是支持的。
2.3 浏览器兼容问题最终解决办法
在上述代码中,有一个问题需要注意。rows Of Table可能是null,也可能是undefined,在这种情况下,若在ready中,find Str Length()函数后还有要执行的函数或语句,那么在火狐浏览器中,在find Str Length()后的函数或语句是不会被执行的。因为我们在获取表格内容的时候没有去判断是否存在内容,当遇到表格内容为空或是undefined的时候,执行该函数时就会有错,系统会自动终止后函数的执行。即使该函数后一个简单的输出语句也不会被执行的。为了在火狐浏览器中能够顺利执行,需要加入一些判断,在for循环语句的循环体中加入以下判断语句(定义inner Text变量之前):
continue的作用是结束本次循环,也就是说循环体中在该语句后面的内容就不会被执行。加入上述代码之后,在火狐下就可以顺利运行。这样当所获得的表格内容为空时,就会跳出循环,转去执行循环后面的语句。
以上是对于一个表格问题的解决方案。其实关于表格还有很多其它方面的问题,要使得整个页面布局看起来比较舒服,就需要加上一些必要的CSS样式。我们不能确保这些样式在不同的浏览器之间是否都可以正常显示,但是可以在出现问题时,寻求各种方式来解决。
3. 结束语
现在所有的主流浏览器供应商重新表示支持W3C(World Wide Web Consortium)标准,而且,这些厂商表示要将标准进行到底;正在制定中的W3C标准比以前更严格,Web创作工具产生的代码也会比以前规范。或许会人认为有了这些标准和规范,浏览器兼容问题就不会那么令人头痛了,答案是否定的。部分原因在于不同的浏览器提供商对同一标准有不同的认识和解释,或者浏览器设计时原本就没有严格地符合新标准;另外,标准和规范本身也有不完善的地方,有些规范或者含糊不清或者对某些功能根本就没有加以明确;最后一个原因是,标准发布得太慢,以至于浏览器供应商在标准之外进行“创新”。所以说解决浏览器兼容问题并不是一朝一夕的,在浏览器显示出现问题时,修改CSS样式达不到我们所需的要求,那我们就得另辟蹊径了。
参考文献
[1]赵莎莎,李敏.CSS样式表与不同的浏览器[J].软件导刊.2007(05):67-68.
[2]黎亚红,罗藤.CSS在不同浏览器中的兼容性问题浅析[J].岳阳职业技术学院学报.2008(03):84-86.
[3]孙桂杰.使用CSS制作网页的几点经验[J].中国现代教育装备.2008(05):55-57.
[4]李显萍.CSS样式继承性的应用[J].吉林省经济管理干部学院学报.2009(04):84-86.
[5]巩恩伟.CSS在浏览器中的兼容性及使用技巧[J].电脑知识与技术.2009(06):1413-1414.
浏览器兼容 篇2
是一个备受欢迎的免费在线跨浏览器测试工具，包含各种平台的各种浏览器，会为你的网站截图，因为太受欢迎，所以要排队。
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
浏览器兼容 篇3
关键词：网页设计,浏览器,兼容问题
随着网络技术的不断发展, 网络上的各种网站也在不断增加, 内容更加丰富, 功能更加强大。但对于网络开发者而言, 为了给用户更好的上网体验, 解决浏览器兼容问题依然是一个不小的挑战。而且网页设计是技术和艺术的组合, 在设计师考虑到美观的同时还要考虑笔记本、平板电脑和手机兼容问题, 网页设计已呈现新的发展趋势。
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) .
浏览器兼容 篇4
微软表示，标准兼容模式将成为IE8的默认渲染引擎。微软此前表示，IE8已经通过了Acid2渲染测试。微软部门经理迪恩·哈查莫维奇 (Dean Hachamovitch)在博客中称：“我们认为言行一致非常重要，
IE8将标准兼容模式作为默认渲染引擎，足以表明我们正在履行互用性方面的承诺。”
按照微软的计划，IE8将包含三种渲染模式，分别是新加入的标准兼容模式、IE7渲染模式、以及一种用于显示老版本网站的模式。由于微软改变了IE8的默认渲染引擎，那些需要IE8使用IE7渲染引擎的网站需要在代码中加入一个标签。
微软承认，做出这一变化也出于法律方面的考虑。微软首席法律顾问布拉德·史密斯(Brad Smith)在声明中称：“尽管目前没有法律规定应当将哪种模式作为浏览器默认渲染引擎，但这一举措无疑可以帮助我们避开潜在的法律和监管麻烦。”去年底，浏览器开发商Opera已经向欧盟提起诉讼，指控微软浏览器不支持通用网络标准。就在上周，微软因为没有完全执行欧盟做出的反垄断裁决，而再此遭到巨额罚款。
浏览器兼容 篇5
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.
【浏览器兼容】推荐阅读：
浏览器兼容性10-11
浏览器模式12-07
糖果浏览器之浏览网页降龙十八掌10-21
软件设计模式浏览器06-22
浏览器/服务器架构06-22
浏览器隐私保护技术12-18
浏览器保护色设置11-12
极速传说――最快浏览器评比05-17
ie浏览器的使用教案11-07
IE浏览器的经典故障12-10