怪异模式(Quirks Mode)对 HTML 页面的影响

Quirks Mode 概述

定义

什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。

历史

由渲染引擎产生的两种文档模式

谈到 Quirks modes 首先就要从浏览器渲染引擎说起。我们知道所有的浏览器都有自己的页面渲染引擎,渲染引擎主要包含两部分,一部分负责 HTML、CSS 代码的解析,另一部分负责脚本代码解析,这两部分合起来就可以绘制出完整的页面。

从表 1 可以看出,现在市面上的主流浏览器中除了 Chrome 和 Safari 都采用了 Webkit 渲染引擎,其余三种浏览器采用了各自不同的渲染方式(不同的 HTML 解析,不同的 JS 解析)。我们这里暂且先不讨论不同的渲染引擎绘制页面时的差异,单以每一种渲染引擎而言,随着版本的发展其渲染页面的方式也有很大的不同。

IE 是最早提出 Quirks Mode 与 Standards Mode(与 Quirks 相对应的一种模式)的,后来 Firefox、Chrome、Safari、Opera 等浏览器也都支持了这两种渲染方式。但是只有在 IE 中用户才可以自由地在两种方式之间切换,其他浏览器都是自动匹配其中一种。下文将主要以 IE 为例来说明 Quirks Mode 对页面绘制的影响,表 2 展示了 IE 随着其渲染引擎的发展,它对 HTML 页面的渲染改变如下。

从表 2 可以清晰的看出,随着 IE 的发展,其渲染引擎(早期为 MSHTML.dll,后来命名为 Trident)也在不断加入新的特性以及修正一些早先版本的错误。在    2001 年 IE6 正式发布之前,当时的市面主要就是 IE 和 Netscape 的 Navigator 两款浏览器,而 IE 拥有很大的用户群,所以大多数的页面都是针对    IE 而设计的,但是 IE 的渲染引擎却没有遵循 W3C 的规范,当时微软已经认识到 W3C 规范的重要性,所以当 IE 发展到 IE6 的时候,渲染引擎(MSHTML.dll)做出了一个重要的改变,将自己原先不符合 W3C 规范中的盒模型 box mode 绘制方式改为与 W3C 标准一致(后面会详细讨论),由于这个重大的改动,原先针对 IE 旧版本所设计的 HTML 页面都不能正确显示了,所以在 IE6 发布的时候附带了一个切换回 IE5 页面渲染方式的功能,这个功能中就首次提出了 Quirks Mode。

当用户需要显示旧版本的页面时切换到 Quirks Mode,这时浏览器的渲染引擎就切换到 IE5.5 所对应的版本(MSHTML.dll 5.5.x),box mode 还是按照之前的方式绘制,这样页面就可以正确显示。当用户需要显示一些新的、满足 W3C 规范的页面时,渲染引擎切换到一个与 Quirks Mode 对应的 Standards Mode(标准模式),在此模式下渲染引擎就是当前的最新版本,这样也就满足了更多的 W3C 规范。这两种 Mode 之间的差别就是因为工作在不同版本的渲染引擎环境下。

最后,Quirks Mode 和 Standards Mode 合起来就称为浏览器的文档模式 Document Mode。

更多精彩内容:http://www.bianceng.cn/web/Html/

时间: 2024-08-01 07:41:05

怪异模式(Quirks Mode)对 HTML 页面的影响的相关文章

浏览器怪异模式和标准模式之间的区别 DTD

从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢? 在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧

如何用请求字符串传值给用模式窗口打开的aspx页面

请求|页面|字符串|请求|字符串 模式窗口是一种方便的当前页面扩展的方式,但是aspx文件只能作为HTM文件的IFRAME才能用这种方式调用.同时,请求字符串也是一种方便常用的页面间传值的方法,那么怎么样使两者给合起来,就是实现如何用请求字符串传值给用模式窗口打开的aspx页面呢? 我们可以用JS脚本实现这种功能: 1.调用页面代码: <script language="javascript"> function GetCorrelativeItemId() { rdl =

站长怎样分析页面权重影响要素获得排名

这年也过完了,相信大家都回到各自的岗位上,开始了一年新的奋斗,那么今天就大家讲一个东西,这个东西是什么呢?就是:站长怎样分析页面权重影响要素获得排名.就是说页面权重到底有哪些主要的要素影响了关键词的排名? 今天主要就是给大家讲:通过分析一个页面权重的要素,那么我这里呢是从两方面来讲. 第一方面就是谷歌对一个页面的一些要求. 第二方面就是百度对一个页面权重的要求或者说是页面质量的一个要求. 在谷歌这一方面的话,前期对一个网站的要求是比较多一点,就是说他对一个网站是怎样一个合理的设置,从而这个页面应

酷6跌破1美元,对其业务模式和营收状况有何影响

酷6跌破1美元,对其业务模式和营收状况有何影响,酷6是否有可能会成为中国在美上市公司中,又一个"仙人股". 股价下降1美分,要搁在任何一家上市公司身上,怕是提都不必提,可对于酷6来说,则是k线的震荡下行!自1月7日股价跌破1美元,连续3日都没爬得上1美元那根红线.化身又一个只有美分级别股价的仙人股,警报四起,坠谷的酷6还能活多久? 每当一家公司遇到危机或迎来盛世,舆论总是习惯一股脑地翻寻各种过往,然后就出来千篇一律的<XX的前世今生>.<你不知道的XX>等,看似

IMF总裁拉加德:虚拟货币、金融中介新模式和人工智能,将产生什么影响?

到了下一代,金融科技将如何改变中央银行业务? 我准备思考下列三项创新可能产生的影响:虚拟货币.金融中介的新模式和人工智能. 其中部分创新已经找到了进入我们的钱包.智能手机和金融系统的途径.但是,这仅仅是个开始. 1. 虚拟货币 让我们先从虚拟货币开始.需要说明的是,虚拟货币并不是指通过Paypal和其他"电子货币"供应商(比如,中国的支付宝或肯尼亚的M-Pesa)以现有货币进行的数字支付. 虚拟货币自成一类,因为它们提供了自己的记账单位和支付系统.这些系统允许在没有中央交易清算所.没有

纵观文本链模式的发展对网站推广的影响

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在网站迅猛发展的时代,越来越多的网站开始重视网络推广这个能带来效益的领域,尤其是很多资金.技术实力都没办法和大牌网站相提并论的中小网站,更需要借助推广的作用,使网站能够广为人知. 而文本广告链的推广模式,是一个互动的概念,是指两个以上的网站通过文字的连接到对方的URL地址上,从而达到双方浏览者通过这样的一个链接做一定程度的融合,将浏览者带到对

从耀点100的经营模式,看网购的“价值与影响”

世界进入21世纪10年代,标志着新世纪已经走完了十年,迎来第二个十年.同样在国内互联网行业,我们也在考虑如何面对第二个十年的挑战--新的机遇和旧的模式,如何立?如何破? 到了00年代末,电子商务成了一个发展迅速的项目,虽然它对业内人士和老网虫来说并不陌生.近年电子商务以世界金融危机为契机发展出了自己的新路,就国内2010年电子商务市场4.5万亿的交易总额.22%的同比增长让人不得不重视这一领域的发展速度.4月8日,在北京举行的2011 LADIES COMMERCE大会主题就是"价值与影响&qu

css中空路径对页面性能影响的解决方案

在写 CSS 的时候,用 background:url(#) 还是会对页面进行多一次请求的. 不过,因为写多 CSS,一般需要用空背景来解决 bug 的时候,测试结果用 background:url(about:blank) 才是我们想要的:解 bug,不影响性能.那很简单,解决方案不就不出来?等等,让我们来做个测试吧. 解决方案是: 大胆使用 about:blank 来代替空,或者'#',特别是在 background-image 中使用 在 img / script / iframe 这些推

从耀点100 的经营模式,看网购的“价值与影响”

   世界进入21世纪10年代,标志着新世纪已经走完了十年,迎来第二个十年.同样在国内互联网行业,我们也在考虑如何面对第二个十年的挑战--新的机遇和旧的模式,如何立?如何破?      到了00年代末,电子商务成了一个发展迅速的项目,虽然它对业内人士和老网虫来说并不陌生.近年电子商务以世界金融危机为契机发展出了自己的新路,就国内2010年电子商务市场4.5万亿的交易总额.22%的同比增长让人不得不重视这一领域的发展速度.4月8日,在北京举行的2011 LADIES COMMERCE大会主题就是"