document.compatMode,quirks mode and standards mode

Posted dazzlinglight

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了document.compatMode,quirks mode and standards mode相关的知识,希望对你有一定的参考价值。

Document.compatMode

Indicates whether the document is rendered in Quirks mode or Standards mode.

SyntaxEDIT

mode = document.compatMode

ValuesEDIT

  • "BackCompat" if the document is in quirks mode;
  • "CSS1Compat" if the document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.
mode
Is an enumerated value that can be:

Note: all these modes are now defined in standards, so the older "standards" and "almost standards" names are nonsensical and no longer used in standards.

ExampleEDIT

if (document.compatMode == "BackCompat") {
  // in Quirks mode
}

Quirks Mode and Standards Mode

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.

There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard 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 full standards mode, the behavior is (hopefully) the behavior described by the html and CSS specifications. Inalmost standards mode, there are only a very small number of quirks implemented.

How do browsers determine which mode to use?EDIT

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

The DOCTYPE shown in the example, <!DOCTYPE html>, is the simplest possible, and the one recommended by HTML5. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. 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.

Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.

In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.

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

XHTML

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. Note however that serving your pages as application/xhtml+xml will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.

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?EDIT

In Firefox, select View Page Info from the context menu, and look for Render Mode.

In Internet Explorer, press F12, and look for Document Mode.

What are the differences between the modes?EDIT

See the list of quirks and almost standards mode for the differences between the modes.

https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode
https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

以上是关于document.compatMode,quirks mode and standards mode的主要内容,如果未能解决你的问题,请参考以下文章

document.compatMode属性

document.compatMode属性

关于 document.compatMode

document.compatMode介绍

js 浏览器模式 宽 高等

浏览器渲染方式判断,并兼容获取网页宽度和滚动条