什么是DOCTYPE：

DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的

位置，位于根元素 HTML 的起始标签之前。这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的

渲染模式（不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析）。

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法 是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也 是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对 CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

DOCTYPE与各种模式的关系：

混杂模式：

不写DOCTYPE

近似标准模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

标准模式：

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我们可以看到，过渡型或框架型HTML声明与过渡型或框架型XHTML声明均可使浏览器进入近似标准模式，同时，html5的DOCTYPE声明和严

格型HTML声明以及严格型XHTML声明则会使浏览器进入标准模式。

三种模式下的表现差异：

首先，混杂模式是不可取的，因为其没有兼容性可言。在IE（IE6~IE9）中，混杂模式即使用IE5.5内核来解析并渲染页面。其次，近似标准

模式是在尽可能遵循标准的基础上兼容部分非标准代码，比如一些已经弃用的标签等。标准模式则是对统一标准实现最好的模式，它要求标

签必须闭合（唯一不需要闭合的就是DOCTYPE标签），不能使用已经废弃的标签等等。目前，使用最多的DOCTYPE声明为过渡型HTML或

XHTML，因为它能最大话的兼容一些老代码。不过，技术领先的公司（比如google、facebook、twitter等都如此）都已经使用了html5的

DOCTYPE声明，即<!DOCTYPE html>，它所触发的模式与严格型HTML或严格型XHTML所触发的模式完全相同，但好处是节省代码且向前兼

容（HTML5时代）。

1.在Quirks 模式下，IE的宽度和高度还包含了padding和border。

2.设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在 quirks模式下却会失效。  IE6/7及IE8混杂模式（quirks模式）中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。

Quirks模式是什么？的更多相关文章

  1. 如果浏览器自动调用quirks模式打开的话

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-03-21) 则肯定你的html的声明,没有写好. 今天遇到几个,前面莫名其妙的多了个空格(在网页上看源码是多空格,复制到n ...

  2. Quirks模式是什么？它和Standards模式有什么区别

    从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差 ...

  3. doctype和Quirks模式

    doctype: 告诉浏览器使用什么模式去渲染页面,可能会影响页面的css渲染和js代码的执行. DTD :为了兼容旧的浏览器渲染方式,将DTD作为参数告诉浏览器使用什么模式渲染页面.始于IE6; 1 ...

  4. (转)Quirks模式与standards模式区别

    建议:不推荐使用Quirks Mode. Quirks Mode中发生了什么?Quirks Mode是一种浏览器(像IE,Firefox,Opera)操作模式.从根本上说,怪异模式(也称之为兼容模式) ...

  5. jsp页面在IE8下文本模式自动为“杂项（Quirks）”导致页面显示错位

    最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是 ...

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

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

  7. IE11新文档模式Edge介绍与评估，及在WebBrowser应用中的使用。

    浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...

  8. 【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解

    文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE ...

  9. [html] Quirks Standards

    [产生] Standards : 从IE6开始,引入了Standards模式 Quirks  : 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差,为了兼容ie5之前的页面, ...

随机推荐

  1. jdbc URL中的各个参数详解

    常用的有两个,一个是gjt(Giant JavaTree)组织提供的mysql驱动,其JDBC Driver名称(Java类名)为:org.gjt.mm.mysql.Driver 详情请参见网站:ht ...

  2. Python环境的安装

    参考官方文档 http://www.runoob.com/python/python-install.html Python已经被移植在许多平台上(经过改动使它能够工作在不同平台上). 您需要下载适用 ...

  3. 各种浏览器hack

    Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...

  4. 【转】数据库范式（1NF 2NF 3NF BCNF）详解一

    以下内容转自:http://jacki6.iteye.com/blog/774866 --------------------------------------------分割线---------- ...

  5. HBase HMaster Architecture - HBase Master架构

    HBase architecture follows the traditional master slave model where you have a master which takes de ...

  6. ASP.NET备份还原数据库

    核心技术:using System.Data.SqlClient;using System.IO;string SqlStr1 = "Server=(local);DataBase=mast ...

  7. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

  8. 宜家的幸福生活，源于K2 BPM的支撑

    很久很久以前,有一篇很火的文章在各大网站被疯狂转载<一个在北欧生活10年的MM,告诉你为什么北欧全球幸福指数第一>,开头第一段就已经让人羡慕嫉妒恨了. "下午的四.五点钟,北欧人 ...

  9. Web体系=资源+URI+表示

    概述 Web有三个核心概念:资源(Resource).URI(UniformResource Identifer,统一资源标识符).表示(Representation).一个资源由一个URI进行标识. ...

  10. [rfc3261]sip - via header

    在很多情况下,sip并非直达目标主机的,而是要经过很多中间节点服务器.在request消息中,via头域表示当前已走过的节点(每经过一个节点,添加一个via头):在response消息中,via头域表 ...