理解怪异模式和标准模式
在 Web 的早期,页面通常会写成两个版本:一个用于 Netscape Navigator,一个用于 Microsoft Internet Explorer。当 W3C 制定 Web 标准时,浏览器不能立即开始使用它们,因为这样做会破坏 Web 上大多数现有网站。因此,浏览器引入了两种模式来区分遵循新标准的网站和旧的遗留网站。
现在 Web 浏览器中的布局引擎使用三种模式:怪异模式 (quirks mode)、有限怪异模式 (limited-quirks mode) 和无怪异模式 (no-quirks mode)。在怪异模式下,布局会模仿 Navigator 4 和 Internet Explorer 5 的行为。为了支持在 Web 标准广泛采用之前构建的网站,这一点至关重要。在无怪异模式下,行为(希望如此)是现代 HTML 和 CSS 规范中所描述的期望行为。在有限怪异模式下,只实现了非常少量的怪异行为。
有限怪异模式和无怪异模式以前分别被称为“近似标准”模式和“完整标准”模式。这些名称已经更改,因为现在的行为已经标准化。
浏览器如何确定使用哪种模式?
对于 HTML 文档,浏览器会在文档开头使用 doctype 来决定是使用怪异模式还是无怪异模式进行处理。为了确保您的页面使用无怪异模式,请确保您的页面具有如下示例中的 doctype:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body></body>
</html>
示例中显示的 doctype `<!doctype html>` 是最简单的,也是当前 HTML 标准推荐的。早期版本的 HTML 标准推荐了其他变体,但如今所有现有的浏览器都会为这个 doctype 使用无怪异模式。没有有效的理由使用更复杂的 doctype。如果您确实使用了其他 doctype,可能会冒着选择一个触发有限怪异模式或怪异模式的风险。
将 doctype 放在 HTML 文档的最开始,在任何其他内容之前。
`<!doctype html>` 的唯一目的是激活无怪异模式。早期版本的 HTML 标准 doctype 提供了额外的含义,但没有任何浏览器曾将 doctype 用于除在渲染模式之间切换以外的任何用途。
另请参阅 不同浏览器选择各种模式的详细说明。
XHTML
如果您使用 `application/xhtml+xml` MIME 类型通过 `Content-Type` HTTP 标头将页面作为 XHTML 提供,则您不需要 doctype 来启用无怪异模式,因为此类文档始终使用无怪异模式。
如果您使用 `text/html` MIME 类型提供类似 XHTML 的内容,浏览器会将其作为 HTML 读取,您将需要 doctype 来使用无怪异模式。
我如何查看正在使用的模式?
如果页面在怪异模式或有限怪异模式下渲染,Firefox 会在开发者工具的控制台选项卡中记录一条警告。如果未显示此警告,则表示 Firefox 正在使用无怪异模式。
JavaScript 中 `document.compatMode` 的值将显示文档是否处于怪异模式。如果其值为 `"BackCompat"`,则表示文档处于怪异模式。如果不是,则其值为 `"CSS1Compat"`。