`
nnwq
  • 浏览: 202768 次
社区版块
存档分类
最新评论

浏览器兼容性问题与浏览器的内核及渲染模式

阅读更多
 

兼容性问题

目前市面上流行的浏览器有多种,这些浏览器在处理一个相同的页面时,表现或行为有时会有差异。这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。

浏览器的内核

各品牌浏览器的内核是不同的,不同的内核处理同一段代码的时候思路不同。因此可以说,浏览器间内核的差异是产生兼容性问题的根本原因。

“内核”也称为“引擎”。常见的浏览器及其渲染引擎(又称排版引擎)、脚本引擎的列表如下:

 

Browser Name Layout Engine ECMAScript Engine
Internet Explorer 6 - 8 Trident JScript
Firefox 3.5 Gecko TraceMonkey
Chrome 4 WebKit V8
Safari 4 WebKit SquirrelFish Extreme
Opera 10 Presto Carakan

 

注:关于浏览器内核的更多信息,请参考 维基百科 - 排版引擎维基百科 - 网页浏览器比较 中的相关内容。

浏览器的工作模式

工作模式简介

浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响,对代码的解析以及脚本的行为也同样有影响。

从更广泛的角度来看,浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候,处理 XML 及一些非 WEB 内容时也有模式上的差异,但本文仅讨论浏览器在处理 HTML 页面时工作模式。

注:关于浏览器的工作模式的更多信息,请参考 Activating Browser Modes with Doctype

工作模式的来源及变迁

微软于 2001 年 8 月 27 日发布的 IE6(Internet Explorer 6)增强了对 CSS1 的兼容,这使得 IE6 对 CSS 的解析及渲染与它的前一个版本 IE5.5 有了很大的差别,如对盒模型的理解、表格尺寸的算法等。

为了保持良好的向后兼容性,微软为用户提供了一个“开关”,来决定浏览器的工作模式,这个“开关”就是页面顶部的 DTD。
某些 DTD 将使 IE6 工作在“标准兼容模式”(即“标准模式”),这种模式使用了 IE6 最新的处理方式,包括对 CSS1 的兼容及一些 DHTML 方面的增强。
而另一些 DTD,包括不设置 DTD 将使 IE6 工作在“向后兼容模式”(即“混杂模式”),这种模式对页面的处理是与 IE5.5 保持一致的,这样就可以保证对一些在 IE5.5 中表现良好的页面在 IE6 中也能达到同样的效果。
微软在后续推出的 IE7、IE8 中,也使用了上述“开关”,与 IE6 一样,在 IE7、IE8 的“混杂模式”下,对页面处理方式仍与 IE5.5 一致。因此可以说,IE 系列的“混杂模式”,将浏览器的行为冻结在了 IE5.5 这个版本,虽然 IE 各版本的混杂模式也略有区别,但它们的本意都是向后兼容。

随着时间的推进和标准的进步,IE6、IE7 的“标准模式”逐渐已经变得不够标准了,2009年3月19日发布的 IE8 重新定义了“标准模式”,再次增强了对标准规范的支持,同时为了保持对 IE7 的兼容,IE8 增加了一种工作模式:“接近标准模式”。于是,IE8 的工作模式就分成了三种:“标准模式”、“接近标准模式”和“混杂模式”。

目前所有主流浏览器对于向后兼容问题的处理都与 IE 系列一样,提供了不同的模式来保证向后兼容。

浏览器的工作模式就是在这种背景下诞生的,它很好的解决了浏览器对标准支持上的不断增强及对一些错误的修复而导致的向后兼容问题,但也将浏览器在不同情况下的表现及行为变得更加复杂多样。

通过以上的内容,我们可以得出结论:如果一个页面能使各浏览器都工作在“标准模式”下,那么各浏览器都将尽量兼容标准,因此各浏览器之间表现出的差异是很少的。相反,如果一个页面使各浏览器都工作在“混杂模式”下,那么各浏览器都将尽量向后兼容,因此各浏览器之间表现出的差异将会最大化。

注:

  1. 关于 IE6 的更多信息,请参考 维基百科 - Internet Explorer 6
  2. 关于此问题,请参考 W3H - RD8001: 各浏览器中 'width' 和 'height' 在某些元素上的作用位置有差异
  3. 关于此问题,请参考 W3H - RE8017: IE Firefox Opera 的混杂模式对于 TD 元素的百分比高度计算错误
  4. 关于 IE6 对浏览器工作模式的区分的详细信息,请参考 MSDN - CSS Enhancements in Internet Explorer 6
  5. 比如 IE6 的混杂模式有著名的“双边距 Bug”,而 IE7 和 IE8 的混杂模式则没有这个问题。
    关于此问题,请参考 W3H - RX2001: IE5.0 IE5.5 IE6 中浮动元素在某些情况下会有双倍外边距
  6. document.compatMode 最先出现在 IE6 中,它的值标示了浏览器的工作模式,“标准模式”返回“CSS1Compat”,“混杂模式”返回“BackCompat”。这一做法到目前为止仍被所有主流浏览器所采用。
    需要注意的是:在后来出现的“接近标准模式”中,document.compatMode 的返回值与“标准模式”一致,为“CSS1Compat”。也就是说,不能通过 document.compatMode 来详细区分浏览器的工作模式,只能用来判断浏览器是否工作在“混杂模式”下。
    因为“标准模式”与“接近标准模式”之间的差异并不大,所以这个方法至今仍被广泛使用。
  7. 关于 Firefox 中 DTD 与浏览器工作模式的详细信息,请参考 Mozilla's DOCTYPE sniffing,关于 Opera 中 DTD 与浏览器工作模式的详细信息,请参考 DOCTYPE Switches support in Opera Presto 2.6

http://www.cnblogs.com/lhb25/archive/2010/09/18/1829849.html

6
0
分享到:
评论

相关推荐

    搜狗浏览器4.0b

    7. 修复了一些由网络层引起的兼容性问题。 8. 修复了一些网站的Favicon不显示或显示为黑底的问题。 9. 修复了Discuz X2论坛无法上传头像的问题。 10. 修复了XP系统中某些网站的认证对话框保存用户名密码异常的问题。...

    几米浏览器 v1.0.10.10.zip

    对于同时开启数十个页面,CPU占用率高的情况,几米浏览器提供了性能优化模式,开启此模式后,CPU占用率可瞬间降低并维持到打开一个单页面的水准,此模式对于网络浏览用户不存在兼容性问题。 屏幕截图 可以以图片...

    2013最新猎豹安全浏览器 3.0.14 官方正式版

    猎豹浏览器具有首创的智能切换引擎,动态选择内核匹配不同网页,并且完美支持HTML5新国际网页标准,网页展现更炫酷,更动感,极速浏览的同时也充分保证兼容性。 猎豹安全浏览器3.0新特性: -新增安全中心, 全新...

    云游浏览器官方下载 v3.0.0.461.zip

    极速双核,满足用户对浏览器速度需求,又满足对浏览器的兼容性需求。 符合国人使用习惯 鼠标手势,超级拖拽,双击关闭标签等特性满足国人的使用习惯。 皮肤系统 最近研发的皮肤系统能实现各种皮肤效果,打造最...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    然而,由于HTML5的W3C标准规范还未制定,安卓系统中类浏览器Webview自身存在一些局限性,因此仍存在着诸多问题亟需解决,包括:(1)多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而...

    世界之窗 3.5.0.3

    17、修复了高速渲染模式菜单不会根据兼容性视图变化的bug; 18、修复了GPU加速与IE9不一致的问题; 19、修复了广告拦截扩展在有首页启动时失效的问题; 20、修复启动时缩放文字闪动的问题; 21、修复单进程模型...

    关于Web前端之HTML5,你知道多少?

    概念:也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,渲染引擎是兼容性问题出现的根本原因。 URL地址 浏览器向服务器发送请求(通过http协议)。 http协议:超文本传输...

    chrome.exe

     2、改善运行速度、安全性、稳定性以及硬件兼容性;  3、大幅提升 64 位版 Chrome 的安全性;  4、增强 64 位版 Chrome 稳定性,渲染器处理崩溃率大大降低;  5、内置组件 Adobe Flash Player 更新至 v18.0.0...

    Lunascape v6.15.0 多国语言版.zip

    Lunascape兼容Internet Explorer和Firefox的标签页网页浏览器,它配备三大主流浏览器内核,将浏览器与各种网络服务进行了无缝集成,并携带了多种革命性的功能。能够实现如高性能的选项卡式浏览、方便快捷的鼠标手势...

    ie9超级拖拽和书签同步

    IE9的性能大幅提升不得不让人很多人又回到IE的怀抱,在各个机构的评测中和个人使用的感受中IE9已与谷歌、火狐等浏览器旗鼓相当,安全性大幅提高并加入硬件渲染的新技术,兼容性又比其他浏览器好,这些绝对是让多数人...

    ceynri.cn::sparkles: 希望做出有创意的个人网站

    山风的小角落 实验性质个人主页 / 注重动画交互 / 黑历史,请辩证看待代码。...在 Edge 上遇到了性能问题以及渲染方式的不同,故表现较差,不推荐使用 Edge 现已更新为 Chromium 内核,性能与渲染方式得到了改进

    moOde audio player-r4.2.img+5.x版本

    - FIX:与最近的bluez-alsa提交不兼容 - FIX:在bluealsa-dmix,bluealsa-aplay中的Cardnum - FIX:HDMI面板上的音量按钮位置 - FIX:UPnP卷同步无法正常工作 - FIX:r40a更新中缺少玩家avahi文件 - FIX:Pi...

Global site tag (gtag.js) - Google Analytics