什么是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. 最小生成树练习3（普里姆算法Prim）

    风萧萧兮易水寒,壮士要去敲代码.本女子开学后再敲了.. poj1258 Agri-Net(最小生成树)水题. #include<cstdio> #include<cstring> ...

  2. backbonejs中的集合篇(一）

    一:集合概念 集合是多个模型,如果把模型model理解为表结构中的行,那么集合collection就是一张表,由多个行组成.我们经常需要用集合来组织和管理多个模型. 二:创建集合 1:扩展Backbo ...

  3. 转 velocity 模板使用总结

    Velocity是一个基于java的模板引擎.它允许任何人仅仅简单的使用模板语言来引用由java代码定义的对象. 当Velocity应用于web开发时,界面设计人员可以和java程序开发人员同步开发一 ...

  4. Eclipse如何设置代码提示功能

    Windows→Preference→XML→XML Files→Editor→Content Assist→Auto Activation→Prompt when these characters ...

  5. JS正则表达式基础

    正则表达式的作用:      测试字符串的某个模式     替换文本     根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字 [^\d]/g这是一个正则表达式,在JS中 ...

  6. 二分图 最大权匹配 km算法

    这个算法的本质还是不断的找增广路: KM算法的正确性基于以下定理:若由二分图中所有满足A[i]+B[j]=w[i,j]的边(i,j)构成的子图(称做相等子图)有完备匹配,那么这个完备匹配就是二分图的最 ...

  7. windows下phpstorm的快捷键

    ctrl+shift+n查找文件 ctrl+shift+f 在一个目录里查找一段代码(ctrl+f的升级版) ctr+shift+r 在一个目录里查找一段代码并替换(ctrl+r的升级版) CTRL+ ...

  8. SQL Server 自定义字符串分割函数

    一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串中存在多少个分隔符号,然后再加一,就是要求的结果(标量值函数)   create function Func_StrArrayL ...

  9. 7 libjpeg使用

    一.交叉编译libjepg编译 tar xzf libjpeg-turbo-1.2.1.tar.gz ./configure –help ./configure --prefix=/work/proj ...

  10. debug实战：进程Hang+High CPU

    最近几周都在解决程序不稳定的问题,具体表现为程序(多进程)时不时的Hang住,同时伴随某个进程的High CPU.跟踪下来,基本都是各种死锁引起的.这里选取一个典型的场景进行分析. 1.抓dump分析 ...