[标准模式与混杂模式]

[标准模式与混杂模式]

关于渲染模式:
在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈)。随着WEB的发展,兼容性问题的解决越来
越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各厂商制定的统一标准)工作的浏览器,比如IE6就是其中之一。但是考虑到以
前建设的网站并不支持标准模式,所以各浏览器在加入标准模式的同时也保留了混杂模式(即以前那种未按照统一标准工作的模式,也叫怪
异模式)。经过多年的发展,后来又出现了近似标准模式(在一种模式中同时融入标准模式和部分混杂模式的特性,也称为接近标准模式、
准标准模式、最有限混杂模式)和超级标准模式(近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式)。因此,浏览器的
模式可以分为两类:标准模式和混杂模式,其中,标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。
需要注意的是,不同厂商浏览器的标准模式也是有细微差别的(这是标准实现程度的问题)。此外,同品牌不同版本浏览器的标准模式也是
有差别的,比如IE6&IE7时代的标准模式在现在看来或许已经不那么标准了(IE8和IE9都在不断的提高标准的实现程度,因此差距越来越大是
必然的),但尽管如此它们依然叫做标准模式,毕竟它们在那个特定时代那个特定版本中确实是按照尽可能遵循标准的方式工作的。
什么是DOCTYPE:
DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD)。通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的
位置,位于根元素 HTML 的起始标签之前。这样一来,在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型,以决定其需要采用的
渲染模式(不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析)。
DOCTYPE与各种模式的关系:
混杂模式:
不写DOCTYPE
近似标准模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
标准模式:
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我们可以看到,过渡型或框架型HTML声明与过渡型或框架型XHTML声明均可使浏览器进入近似标准模式,同时,html5的DOCTYPE声明和严
格型HTML声明以及严格型XHTML声明则会使浏览器进入标准模式。
三种模式下的表现差异:
首先,混杂模式是不可取的,因为其没有兼容性可言。在IE(IE6~IE9)中,混杂模式即使用IE5.5内核来解析并渲染页面。其次,近似标准
模式是在尽可能遵循标准的基础上兼容部分非标准代码,比如一些已经弃用的标签等。标准模式则是对统一标准实现最好的模式,它要求标
签必须闭合(唯一不需要闭合的就是DOCTYPE标签),不能使用已经废弃的标签等等。目前,使用最多的DOCTYPE声明为过渡型HTML或
XHTML,因为它能最大话的兼容一些老代码。不过,技术领先的公司(比如google、facebook、twitter等都如此)都已经使用了html5的
DOCTYPE声明,即<!DOCTYPE html>,它所触发的模式与严格型HTML或严格型XHTML所触发的模式完全相同,但好处是节省代码且向前兼
容(HTML5时代)。
其它激活混杂模式的情况:
前面已经介绍了,当我们不写DOCTYPE声明时,所有浏览器都会进入混杂模式。但是也存在一些因其他情况而进入混杂模式的时候,这些情
况都是我们应该避免的,最常见的就是在DOCTYPE声明前面出现了这些内容:普通文本、HTML 标签、HTML 注释、XML 声明、IE条件注
释。对于普通文本和HTML标签,各浏览器均进入了混杂模式,这个很好理解,都看到疑似的HTML文档正文了,浏览器就不需要再往下追查
DOCTYPE在哪里了。对于HTML注释和XML声明,它们和上面的普通文本和HTML标签有些差别,它们不会在页面中展示出来,即不可视。这
时,有的浏览器则显得十分“智能”,非IE浏览器均会忽略它们的存在,DOCTYPE 被正确解析。但是在IE6中,DOCTYPE之前的 XML 声明会导
致页面进入混杂模式,而如果DOCTYPE之前出现了HTML注释,则所有IE都会进入混杂模式。有的作者很聪明,他既在DOCTYPE之前加入了
他需要的内容,却又没有使IE由于这些内容而进入混杂模式。他可能会这么写:

<![if !IE]><![endif]>
<![if false]><![endif]>
上面这些IE条件注释在非IE浏览器中,可能完全被忽略,可能被解释为普通HTML注释。但是在IE中它们全部消失了,因为这就是IE条件注释
的作用。所以这也是目前比较合适的在DOCTYPE之前写点什么又保证所有浏览器均为标准模式的做法,但我们仍然不推荐在DOCTYPE之前
加入任何非空白内容。
用JS判断浏览器当前的模式:
document.write(document.compatMode == "CSS1Compat" ? "当前处于标准模式" : "当前处于混杂模式");

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容

  • 1. DOCTYPE种类 DOCTYPE(是Document Type文档类型的简写)是一组机器可读的规则,它指示...
    Maggie_77阅读 1,119评论 0 0
  • DOCTYPE 的作用? 声明位于文档的最前面,处于标签之前,告知浏览器的解析器,用什么文档标准解析这个文档。 D...
    lx_smile阅读 695评论 0 0
  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 645评论 0 2
  • HTML、XML、XHTML有什么区别? XMLXML是The Extensible Markup Languag...
    zx9426阅读 412评论 0 1
  • 5mh_阅读 89评论 0 0