浏览器模式与DOCTYPE

Quirks mode and strict mode

     怪异模式(Quirks mode)标准模式(strict mode)是浏览器用于解析CSS的两种“模式”。

      早期(IE6诞生以前),各浏览器都处于各自比较封闭的发展中, 各自实现CSS机制,不遵循W3C提出的标准。随着WEB的发展,兼容性问题的解决越来越显得迫切,随即,各浏览器厂商发布了遵循W3C标准(遵循各厂商制定的统一标准)工作的浏览器,比如IE6就是其中之一。但是考虑到以前建设的网站并不支持标准模式,所以各浏览器在加入标准模式的同时也保留了怪异模式(即以前那种未按照统一标准工作的模式,也叫混杂模式)。

Complication: almost strict mode

      早期,在标准模式下图片会突然获得奇怪的底部边距,并且无法移除。原因是在标准模式下,<img />标签是行内元素,意思是一些空间将被保留给下行字母字符如g, j, q,而图片并没有下行字符,所以空间是从未使用过,但它仍然必须保留。

      解决办法是声明图片为块级元素:img{display:block}

      浏览器厂商,尤其是Mozilla,认为这是一个混乱的情况,于是他们引入了“近似标准模式”(Almost Standards Mode,也称为准标准模式),这也是标准模式,只不过它将图片当作块级元素而不是行内元素。

      大多数常见的doctypes都触发近似标准模式。目前为止,图片的处理是近似标准模式和真正标准模式最重要的区别。

      因此,浏览器的模式可以分为两类:标准模式和混杂模式,其中,标准模式又可更严格的分为近似标准模式和标准模式

DOCTYPE与各种模式的关系

       DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写DTD)。通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的位置,位于根元素 HTML 的起始标签之前。这样一来,在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型,以决定其需要采用的渲染模式(不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析)。

     选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准,任何(X)HTML文档必须有一个DOCTYPE用以告诉其他人这个文档的类型风格。

      1. 标准化以前写的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页;

      2. 过渡型或框架型HTML/XHTML声明使浏览器进入近似标准模式;

      3. Html5的DOCTYPE声明和严格型HTML/XHTML声明则会使浏览器进入标准模式,依据标准的CSS规则渲染网页。

      4. 任何新的或未知的DOCTYPE将触发标准模式。

      5. 一些页面依据怪异模式而写,但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式。

判断浏览器当前的模式

        可以通过获取document.compatMode的值判断浏览器的模式:
  • BackCompat :当前处于怪异模式
  • CSS1Compat :当前处于标准模式

补充:

  1. Mac平台的IE浏览器最先实现怪异和标准两种模式,IE Windows 6 、Mozilla、Safari和Opera也相继实现这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。
  2. 需要注意的是,不同厂商浏览器的标准模式也是有细微差别的(这是标准实现程度的问题)。此外,同品牌不同版本浏览器的标准模式也是有差别的,比如IE6&IE7时代的标准模式在现在看来或许已经不那么标准了(IE8和IE9都在不断的提高标准的实现程度,因此差距越来越大是必然的),但尽管如此它们依然叫做标准模式,毕竟它们在那个特定时代那个特定版本中确实是按照尽可能遵循标准的方式工作的。
  3. Windows平台IE的特殊性 : XML声明。在Windows平台的IE6 浏览器中,微软实现了一个额外的规则:如果DOCTYPE声明在XML声明之后,将触发怪异模式。这样做是为了允许开发者以怪异模式渲染需要DOCTYPE的网页。下面是XML声明,必须将它放在页面的开头,在DOCTYPE之前。<?xml version="1.0" encoding="iso-8859-1"?>。但是这种行为已经从IE7 中移除了。
  4. Good solution?就Peter-Paul Koch而言,他并不十分满意“DOCTYPE切换”方案。一个DOCTYPE所提供的信息是(X)HTML文档所拥有的类型风格,即文档的结构,而不应该提供任何关于文档表现(外观)的信息,因为那违反了CSS关于页面结构和表现分离的原则。
参考
  1. DOCTYPE与浏览器模式详解  
  2. DOCTYPE 严格模式与混杂模式 
  3. Quirks mode and strict mode  Peter-Paul Koch在这篇文章最后有列出怪异模式和严格模式在不同浏览器中的一些重要表现。

你可能感兴趣的:(web前端,DOCTYPE,浏览器模式)