什么是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. DataTable 中Distinct操作

    DataTable dt = ds.Tables[]; DataView dataView = dt.DefaultView; DataTable dtDistinct = dataView.ToTa ...

  2. plot a critical difference diagram , MATLAB code

    plot a critical difference diagram , MATLAB code 建立criticaldifference函数 function cd = criticaldiffer ...

  3. JDE函数--获取当前登录人的描述

    业务描述:当前登录人ID为数字,中文姓名保存在描述1字段中 方式: 根据系统变量获取用户的地址号,根据TableIO获取用户描述1.如下图所示: 由于使用AN8时,变量类型不一致,所以使用函数将cha ...

  4. BestCoder Round #11 题解集合

    1001.Alice and Bob 签到题*1,只要x * 2 == n && y * 2 == m就满足条件. var m, n, x, y : int64; begin whil ...

  5. Icon资源详解[1]

    本文分享&备忘最近了解到的icon资源在windows平台下相关的一部分知识,所有测试代码都尽可能的依赖win32 API实现.更全面的知识,参考文末列出的”参考资料“.      关键字:I ...

  6. python使用urllib2抓取网页

    1.使用python的库urllib2,用到urlopen和Request方法. 2.方法urlopen原形 urllib2.urlopen(url[, data][, timeout]) 其中: u ...

  7. HookSSDT 通过HookOpenProcess函数阻止暴力枚举进程

    首先要知道Ring3层调用OpenProcess的流程 //当Ring3调用OpenProcess //1从自己的模块(.exe)的导入表中取值 //2Ntdll.dll模块的导出表中执行ZwOpen ...

  8. 常州培训 day6 解题报告

    第一题: 题目大意: 给出一个N*N的矩阵,矩阵元素均为0或1.定义矩阵权值为sum(F[i][j]*F[j][i]); 给出K个操作: 询问矩阵的权值mod 2. 将矩阵的某一行元素取反(0变成1, ...

  9. ROS主题发布订阅

    节点是一个可执行程序,它连接到了ROS的网络系统中.我们将会创建一个发布者,也就是说话者节点,它将会持续的广播一个信息. 改变目录到之前所建立的那个包下: cd ~/catkin_ws/src/beg ...

  10. [转] Linux内核代码风格 CodingStyle [CH]

    from:http://blog.csdn.net/jiang_dlut/article/details/8163731 中文版维护者: 张乐 Zhang Le <r0bertz@gentoo. ...