doctype 怪异模式和标准模式

1、Doctype？
Doctype是一种标准通用的文档类型声明，它必须出现在文件的第一行，目的是告诉浏览器使用什么样的文档类型定义（DTD）来解析文档。
它不是HTML标签，它是指示web浏览器文档关于页面使用哪个HTML版本规范进行编写的指令。
在HTML 4.0.1，Doctype中有三个不同的文档类型，它的声明格式为

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

HTML4.0.1是基于SGML，因此Doctype需要对DTD进行引用，儿而HTML5不基于SGML，因此不需要对DTD进行引用，但是也需要Doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

<!DOCTYPE html> //是不是很简单

提示：

标签是没有结束标签的
对大小写不敏感

2、标准（严格）模式（strict mode）和混杂（怪异）模式（quirks mode）
所谓的标准模式是指浏览器按照w3c标准解析执行代码，混杂模式则是浏览器以一种比较宽松的向后兼容的方式显示。混杂模式通常模式老式浏览器（比如Microsoft IE4 和Netscape Navigator 4）的行为以防止老站点无法工作。
浏览器解析使用标准模式还是怪异模式，与doctype的声明直接相关，DTD声明定义了标准文档的类型，使浏览器使用相应的方式加载网页并显示，忽略DTD声明，将进入怪异模式。
这两种产生的原因是因为各个浏览器对页面的渲染上存在差异，甚至在同一浏览器不同版本中，对页面的渲染也不相同，在w3c标准出台之前，浏览器对页面的渲染上没有统一规范，产生了差异(quirks mode)，在w3c标准推出后，浏览器渲染页面有了统一的标准（strict mode），这是两者最基本的区别。
火狐一直是标准模式，所以呈现效果差别不大，但在ie（6,7,8）中，标准模式和混杂模式的差别很大，主要体现在对盒模型的解释上。
标准模式下的盒模型标准是由margin、border、padding、content四部分组成，其中宽度为content部分，不包含其他的部分，外盒尺寸宽度为 content width + padding*2 +border*2 +margin *2，元素的宽度为content width + padding*2 + border*2：

混杂模式现的盒子模型也是由margin、border、padding、content四部分组成，其中宽度为content + border*2 + padding*2,外盒尺寸的宽度为content width + margin*2 ,元素的宽度为content width：

3、如何触发这两种模式？
浏览器根据doctype是否存在以及声明使用哪种DTD来呈现。
如果XHTML文档包含形式完整的doctype，则以一般标准模式呈现。
对于html4.0.1文档，包含严格DTD的doctype以标准模式呈现页面，包含过渡DTD和URI的doctype以标准模式呈现页面，但是有过渡DTD没有URI则以混杂模式呈现。Doctype不存在或者行事不正确则以混杂模式呈现

4、如何判断目前使用的模式？

alert(“window.top.document.compatMode”);
//css1Compat  标准模式
//BackCompat  混杂模式alert($.support.boxModel);//true  标准模式
//false  混杂模式

5、解决方案
1、声明DOCTYPE为标准模式，ie6在标准模式下能够符合W3C标准
2、使用box-sizing属性，设置为border-box
box-sizing是CSS3新增的属性，能够用来修改盒模型，可选值为：
a. content-box：默认值，让元素维持W3C的标准盒模型
b. border-box：让元素维持IE传统（混杂模式）的盒模型
c. inherit：从父元素继承box-sizing属性的值

参考资料：

精通CSS：高级Web标准解决方案(第2版)
W3Cschol http://www.w3school.com.cn/index.html

doctype 怪异模式和标准模式相关推荐

浏览器的怪异模式和标准模式的区别
何时触发怪异模式和标准模式浏览器根据doctype是否存在和哪种DOT格式来决定怪异模式还是标准模式,如果XHTML文档包含完整的DOCTYPE,那么它一般以标准模式呈现代码对于html4.0文档 ...
浏览器怪异模式和标准模式之间的区别 DTD
从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差 ...
Doctype作用及兼容模式与标准模式的区别
一.Doctype作用 <!DOCTYPE>声明位于HTML文档中的第一行,处于<html>标签之前.告知浏览器的解析器用什么文档标准解析这个文档. DOCTYPE不存在或格式 ...
文档模式：标准模式、混杂模式
一. 背景: 由于历史的原因,不同浏览器对页面的渲染是不同的,甚至同一浏览器的不同版本也是不同的.然后这时候就出现了一个至关重要的标准规范:W3C标准. 在W3C标准出台之前,不同的浏览器在页面的渲 ...
浏览器的混杂模式和标准模式
##浏览器的混杂模式和标准模式有时候代码没问题,但是执行时不会报错却也显示不出来,就要考虑一下浏览器的兼容问题浏览器是存在混杂模式和标准模式的,所以有时候对象的获取设置,会不太一样,关于浏览器的混 ...
html严格模式和标准模式，怎么触发这两种模式
声明位于文档的最前位置,处于标签之前,可以告诉浏览器使用哪种html/xhmtl文档该标签有三种类型:严格版本.过度版本.以及基于框架的html文档 1.浏览器模式标准模式:浏览器根据规范呈现页面 ...
doctype的作用，标准模式和兼容模式的区别
doctype的作用: DOCTYPE是document type (文档类型) 的缩写. 声明位于文档的最前面,处于标签之前,它不是html标签. 主要的作用是告诉浏览器的解析器使用哪种HTML规范 ...
怪异模式和标准模式的定义和区别
所谓的标准模式是指,浏览器按W3C标准解析执行代码: 怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式. 浏览器解析时到底使用标准模式还是怪异模 ...
准标准模式和标准模式之间的差别-1(旧文首发)
"理论上,标准模式和准标准模式的区别仅在于非IE6/7浏览器对于单元格里(原文说法可能有误,经测试所有图片均受影响)图片布局的不同处理.同事渔隐做了细致地测试并给出了解决方案. Update ...
Java设计模式学习总结（9）——结构型模式之过滤器模式（标准模式）
过滤器模式( Filter Pattern )或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来.这 ...

doctype 怪异模式和标准模式

doctype 怪异模式和标准模式相关推荐

最新文章

热门文章