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的更多相关文章

  1. document.compatMode简介

    对于document.compatMode,很多朋友可能很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面 ...

  2. document.compatMode属性介绍

    之前不了解这个属性,今天总结一下,以后可能会用到. 对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.co ...

  3. document.compatMode介绍

    来自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html 问题描述:看到阮一峰的博客里面的代码使用到了document.c ...

  4. 转 document.compatMode介绍

    对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的 ...

  5. 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode

    近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...

  6. javascript document.compatMode属性

    文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Stand ...

  7. document.compatMode(判断当前浏览器采用的渲染方式)

    转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...

  8. JS判断doctype文档模式-document.compatMode

    IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有 ...

  9. document.compatMode 浏览器渲染模式判定利器

    在加了DOCTYPE的页面document.compatMode输出CSS1Compat,不管加的是XHTML的还是HTML5的DOCTYPE.没有加的输出BackCompat. BackCompat ...

随机推荐

  1. JSP 传统标签extends TagSupport

    1.控制JSP页面某一部分内容是否执行 public int doStartTag() 返回EVAL_BODY_INCLUDE,执行 返回SKIP_BODY,不执行 2.控制整个JSP页面是否执行 p ...

  2. shutil使用

    1.用shutil移动文件, import shutil shutil.move('/root/test.yaml','/home/') shutil.move('/root/k8s.py','/ho ...

  3. Day02:基本IO操作

    IO流 基本IO与OS 按照流的方向主要分为输入流和输出流. 数据流按照数据单位的不同分为字节流和字符流. 按照功能可以划分节点流和处理流. 节点流与处理流 按照流是否直接与特定的地方(如磁盘.内存. ...

  4. python基础知识(列表详解)

    列表(list) 列表中可以存入整数.实数.布尔值.字符串.序列.对象 可变序列 列表  []  元素间隔用   ,号分隔 列表的创建和删除 使用赋值运算符直接创建列表 listname = [元素1 ...

  5. Leetcode之深度+广度优先搜索(DFS+BFS)专题-934. 最短的桥(Shortest Bridge)

    Leetcode之广度优先搜索(BFS)专题-934. 最短的桥(Shortest Bridge) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary ...

  6. 【DSP开发】【计算机视觉】TI 视觉软件开发套件ADAS

    关键字:TI  视觉软件开发套件  ADAS 日前,德州仪器 (TI) 宣布推出其视觉软件开发套件(SDK),从而为开发人员提供了一款灵活的框架.一组丰富齐全的硬件设备驱动程序和一套适用的开发工具,可 ...

  7. s7-200日常使用烂笔头

    这篇文章只是记录我的苦逼自控之路,有些是书上的,有些是自己发现的,不记载网上得出来的一些东西.只为强化记忆以及便于翻阅. 1.今天使用PC\PPI cable线缆连接成功了200,这个线是盗版线,之前 ...

  8. PHP中的接口

    对象接口 使用接口(interface),可以指定某个类必须实现哪些方法,但不需要定义这些方法的具体内容. 接口是通过 interface 关键字来定义的,就像定义一个标准的类一样,但其中定义所有的方 ...

  9. AssertionError [ERR_ASSERTION]: Task function must be specified,gulp版本不一致

    报错信息: vue项目打包报错 > innovate-admin-vue@ build /home/soldier/SOLDIER/IDE_project/webStorm_project/in ...

  10. 移动端、pc端通用点击复制

    点击复制 function copyArticle(event){ const range = document.createRange(); range.selectNode(document.ge ...