DOCTYPE 严格模式与混杂模式

桃扇骨 2022-08-07 03:39 193阅读 0赞

看到的一篇好文章，分享给自己，主要是看起来比较轻松 很容易理解。

\--------------------------------------------------------------------------

今天试着翻译了Peter-Paul Koch这篇文章，希望对大家有所帮助。

原文链接：[Quirks mode and strict mode 地址是：http://www.quirksmode.org/css/quirksmode.html][Quirks mode and strict mode _http_www.quirksmode.org_css_quirksmode.html]

怪异模式和严格模式（译注：一般称为标准模式：Standards Mode,下文中的严格模式都可以理解为标准模式）是浏览器解析CSS时的两种‘模式’。这篇文章将简单阐述这两种模式之间的差异。

译注：一个网页一般由两部分组成即：HTML（Hypertext Markup Language）和CSS（Cascade Style Sheets）。  
HTML负责描述网页的结构和内容（如标题，导航栏等），而CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。

# #

## 问题的产生： ##

当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循[W3C][]提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。

为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时（译注：微软和网景之间的一段竞争）所产生的混乱。

## 解决方案： ##

任何的解决方案必须跟随如下两个方面：

1：允许网站开发者能够选择他们所熟知的模式。

2：依然使用旧式规则显示陈旧的网站。

换句话说，所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准，任何一个(X)HTML文档必须拥有一个DOCTYPE（译注：DTD（文档类型定义）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格

1：产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。

2：相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。

3：任何新的或未知的DOCTYPE将触发严格模式。

4：一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照这个[浏览器比较图表][Link 1] 。

注意：你的网页并不一定要依据所选择的DOCTYPE去获得有效性验证，一个DOCTYPE标签足以触发严格模式。

我在大部分网页中使用如下的DOCTYPE。它除了声明我的网页是XHTML 1.0 过渡类型之外，还将在所有浏览器中触发“准严格模式”（译注：下文将介绍这个模式）

# #

## 完美的解决方案？ ##

就个人而言，我并不十分满意“DOCTYPE切换”方案。一个DOCTYPE所提供的信息是(X)HTML文档所拥有的类型风格，即文档的结构，而不应该提供任何关于文档表现（外观）的信息，因为那违反了CSS关于页面结构和表现分离的原则。

## 并发症：准严格模式 ##

在早些时候，尝试使用严格模式总是会产生关于图片会突然获得旧式的底部边距，并且无法移除的讨论。产生这个现象的原因是严格模式将![怪异模式和严格模式][Image 1]标签当成行内元素，这意味着一些空间将被保留给一些拥有”尾部“的字符如（g, j, q），而图片并没有“尾部”字符，所以这些空间将不会被使用，但是却依旧保留着。

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

浏览器厂商，尤其是Mozilla，认为这是一种产生困惑的情况，于是他们引入了“准严格模式”（译注：也称为准标准模式 Almost Standards Mode），这与严格模式一样，除了它将图片当作块级元素而不是行内元素。

## Windows平台IE的特殊性 : XML声明 ##

在Windows平台的IE6 浏览器中，微软实现了一个额外的规则：如果DOCTYPE声明在XML声明之后，将触发怪异模式。这样做是为了允许开发者在怪异模式下获得“有效的网页” （需要DOCTYPE）。下面是XML声明，你需要将它放在页面的开头，在DOCTYPE之前。

注意这种行为已经从IE7 中移除。

译注：Peter-Paul Koch在这篇文章后面列出了怪异模式和严格模式在不同浏览器中的一些重要表现，建议了解一下。

[Quirks mode and strict mode _http_www.quirksmode.org_css_quirksmode.html]: http://www.quirksmode.org/css/quirksmode.html
[W3C]: http://www.w3.org/
[Link 1]: http://hsivonen.iki.fi/doctype/
[Image 1]: