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

 时间:2020-09-06  贡献者:cpnic.com

导读:最新web面试题css浏览器的兼容性问题,龙源期刊网 http://www.qikan.com.cn网页浏览器兼容性问题综述作者:刘晓娟 来源:《软件导刊》2016 年第 04 期摘要:浏览器兼容性问题是指同一个网页在不同的浏览器上的显示效果不一

最新web面试题css浏览器的兼容性问题
最新web面试题css浏览器的兼容性问题

龙源期刊网 http://www.qikan.com.cn网页浏览器兼容性问题综述作者:刘晓娟 来源:《软件导刊》2016 年第 04 期摘要:浏览器兼容性问题是指同一个网页在不同的浏览器上的显示效果不一致。

通过对浏 览器内核及网页解析方式的研究,总结了浏览器兼容性常见问题,分析了引起浏览器兼容性问 题的原因,阐述了通用的解决办法。

关键词关键词:浏览器;浏览器兼容性;CSS 兼容性;JS 兼容性中图分类号:TP393 文献标识码:A 文章编号:1672-7800(2016)004-0174-020 引言浏览器是用于访问网络应用的客户端软件,使用浏览器可以浏览网络上的各种资源。

浏览 器有多种,如微软的 InternetExplorer、Mozilla 的 Firefox、Apple 的 Safari 等,还有 GoogleChrome、Opera、GreenBrowser 浏览器、360 安全浏览器、搜狗浏览器、猎豹浏览器、 傲游浏览器、百度浏览器等。

不同的浏览器使用的内核及所支持的 HTML、CSS 等网页语言标 准不同,用户客户端的计算机环境也有所不同(如分辨率不同),造成同一个网页在不同的浏 览器上显示效果可能不一致,如网页元素位置混乱错位、导航不能正常显示、内容显示不完 整、视频不能正常播放等,这就是网页的浏览器兼容性问题。

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

1 浏览器浏览器(Browser)是一个应用软件程序。

用户可以使用浏览器连接到网络,访问网络上 的各种资源。

浏览器可以根据用户输入的网络地址确定信息资源位置,并将这些资源提取出 来,通过解析在浏览器中显示,方便人们浏览。

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

浏览器内核分为两部分:渲染引擎(layoutengineer 或 RenderingEngine)及 JS 引擎[1]。

渲 染引擎负责取得网页内容(HTML、XML、图像等等)、整理信息(例如加入 CSS 等)以及 计算网页的显示方式,然后输出至显示器或打印机。

渲染引擎决定了浏览器如何显示网页的内

龙源期刊网 http://www.qikan.com.cn容及页面的格式信息。

JS 引擎负责解析 JavaScript 语言,执行 JavaScript 语言实现网页的动态 效果。

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

1.2 浏览器加载和解析 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 设置,但是图片的位置设置在不同的浏览器中显示效 果不同。

 
 

微信扫一扫 送福利