怪癖模式

在过去的网络时代,页面通常以两种版本编写:一种用于 Netscape Navigator,另一种用于 Microsoft Internet Explorer。当 W3C 制定网络标准时,浏览器不能立即开始使用它们,因为这样做会破坏网络上大多数现有的网站。因此,浏览器引入了两种模式来区别对待新的符合标准的网站和旧的遗留网站。

¥In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.

Web 浏览器中的布局引擎现在使用三种模式:怪癖模式、有限怪癖模式和无怪癖模式。在怪异模式下,布局模拟 Navigator 4 和 Internet Explorer 5 中的行为。这对于支持在广泛采用 Web 标准之前构建的网站至关重要。在无怪癖模式下,行为(希望)是现代 HTML 和 CSS 规范所描述的所需行为。在有限怪癖模式下,仅实现了极少量的怪癖。

¥There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.

有限怪癖和无怪癖模式过去分别称为 "almost-standards" 模式和 "完整标准" 模式。随着行为现已标准化,这些名称已更改。

¥The limited-quirks and no-quirks modes used to be called "almost-standards" mode and "full standards" mode, respectively. These names have been changed as the behavior is now standardized.

浏览器如何确定使用哪种模式?

¥How do browsers determine which mode to use?

对于 HTML 文档,浏览器在文档的开头使用 DOCTYPE 来决定是否以怪异模式或标准模式处理它。为了确保你的页面使用完整标准模式,请确保你的页面具有如下例所示的 DOCTYPE:

¥For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE like in this example:

html
<!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。

¥The DOCTYPE shown in the example, <!DOCTYPE html>, is the simplest possible, and the one recommended by current HTML standards. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE. There are no valid reasons to use a more complicated DOCTYPE. If you do use another DOCTYPE, you may risk choosing one which triggers almost standards mode or quirks mode.

将 DOCTYPE 放在 HTML 文档的开头,任何其他内容之前。

¥Put the DOCTYPE right at the beginning of your HTML document, before any other content.

<!DOCTYPE html> 的唯一目的是激活无怪癖模式。旧版本的 HTML 标准 DOCTYPE 提供了额外的含义,但是除了在渲染模式之间切换之外,没有浏览器使用 DOCTYPE 进行任何其他操作。

¥The only purpose of <!DOCTYPE html> is to activate no-quirks mode. Older versions of HTML standard DOCTYPEs provided additional meaning, but no browser ever used the DOCTYPE for anything other than switching between render modes.

另请参阅 当不同的浏览器选择不同的模式时 的详细说明。

¥See also a detailed description of when different browsers choose various modes.

XHTML

如果你使用 Content-Type HTTP 标头中的 application/xhtml+xml MIME 类型将页面设置为 XHTML,则不需要 DOCTYPE 来启用标准模式,因为此类文档始终使用 '全标准模式'。

¥If you serve your page as XHTML using the application/xhtml+xml MIME type in the Content-Type HTTP header, you do not need a DOCTYPE to enable standards mode, as such documents always use 'full standards mode'.

如果你使用 text/html MIME 类型提供类似 XHTML 的内容,浏览器会将其读取为 HTML,并且你将需要 DOCTYPE 才能使用标准模式。

¥If you serve XHTML-like content using the text/html MIME type, browsers will read it as HTML, and you will need the DOCTYPE to use standards mode.

如何查看使用的是哪种模式?

¥How do I see which mode is used?

如果页面以怪异或有限怪异模式呈现,Firefox 将在开发者工具的控制台选项卡中记录警告。如果未显示此警告,则 Firefox 正在使用无怪癖模式。

¥If the page is rendered in quirks or limited-quirks mode, Firefox will log a warning to the console tab in the developer tools. If this warning is not shown, Firefox is using no-quirks mode.

JavaScript 中的 document.compatMode 值将显示文档是否处于怪异模式。如果其值为 "BackCompat",则文档处于怪异模式。如果不是,则其值为 "CSS1Compat"

¥The value of document.compatMode in JavaScript will show whether or not the document is in quirks mode. If its value is "BackCompat", the document is in quirks mode. If it isn't, it will have value "CSS1Compat".