quirks mode(怪异模式) 和 standard mode(标准模式)

出现的背景

在很久之前的浏览器，还是Netscape Navigator和 Microsoft Internet Explorer的时候，页面主要就是为这两个浏览器写的。但是到了今天了，firefox、chrome、opera等浏览器的兴起，再加上W3C创建了web标准。本来要是早统一标准，我们就不用为一个浏览器兼容的问题搞得头昏脑涨。但是一些网站还是主要为之前的Netscape和Microsoft浏览器做的，所以如果用我们现在的web标准去要求浏览器厂家实现的话，之前的一些网站就不能用了，所以浏览器就出现可以有两种模式可以切换，实现向后兼容。或者说，浏览器开发商又要对标准化的HTML、CSS支持，又要对之前做的网站也就是非标准的网站实现向后兼容。

如何触发这两种模式

说到这里，我们说说标签的作用，之前对HTML标签还不怎么感冒的，就看了一些W3C的介绍，然后就做了一些可用的界面，觉得HTML好像挺简单似的，入门没什么压力呀。等到现在，越来越认识到HTML作为Web前端的结构，是一个页面的骨架，确实很重要，还有加上了语义化标签，渐渐地对HTML刮目相看。回到正题，我想说的是也是我忽略的一个标签，可能是看了往年大公司面试题的原因吧，觉得它似乎挺重要的。

DOCTYPE标签的使用跟每个属性的作用

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

html：表示该文档的跟元素为html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 一个文档类型的公共标识符，是一个xhtml1.0的过渡文档。解析到这里，浏览器就去寻找这个DTD，如果找到了就用这个DTD的要求去渲染你的网页，如果找不到呢？看下面
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 浏览器找不到DTD的话，就去到这个url那里下载DTD并使用。

DOCTYPE标签的作用

跟浏览器说要用那个DTD来解析我的网页
能对界面进行有效性验证
实现怪异和标准模式的切换

我们把重点放在两种模式的切换

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
这个将会触发浏览器的标准模式，因为该DOCTYPE标签包括了DTD、URI；还有就是DOCTYPE标签有DTD但是没有URI也会触发浏览器的标准模式
```
<!DOCTYPE html PUBLIC >
```
这个会触发浏览器的怪异模式，因为该DOCTYPE标签中没有DTD、URI。这里再说明一点就是如果DOTYPE标签没有DTD但是有URI还是会触发怪异模式

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

这两个都会在IE6中触发怪异模式，因为IE6一定要DOCTYPE为文档的第一个元素才肯触发标准模式

更为具体的各种浏览器DOCTYPE的触发模式的转换，可以看Activating Browser Modes with Doctype

检测当前浏览器使用的模式

我现在只能想到一种方式去检测浏览器的模式，就是用js来实现的，如果在看的您要是有更好的idea的话，请告诉我！其实它浏览器的兼容性还是可以的。

javascript代码：document.compatMode
(1)BackCompat：标准兼容模式关闭;
(2)CSS1Compat：标准兼容模式开启

标准模式下的页面与怪异模式下的页面区别

在height、width应用的元素有区别
```
<span style="height: 40px; width: 200px; background: red;margin:10px">我是行内元素span，但是我可以在quirks模式下用width、height属性</span>
```
在IE的怪异模式下，我们可以看下界面
表现得跟块级元素一模一样呀。
再来看在IE的标准模式下，界面是什么样子的
区别最大要数盒子模型不一样，对于IE quirk模式下
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom，
但是在W3C标准下：
box width = content width，
box height = content height，

这样的话，会导致什么情况呢？我们来看下例子先：
```
.div {border: 5px solid blue;height: 60px;width: 200px;}
```
自己在HTML再添加一个div元素，它的class为div就行了。
在IE quirks model中：

但是在IE8 standard model中：

说明下：图片的盒子模型是在IE的开发者工具中截图出来的，红色框应该表示的是border+padding+content的width、height
元素溢出处理方式不同

在 IE Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

其实就是说quirks model会自动包含溢出的子元素。

其他方面不一样还是有的，有兴趣的话，自己百度google下吧！

参考文献

Quirks Mode and Standards Mode
DOCTYPE与浏览器模式分析
Quirks mode
Quirks mode and strict mode
怪异模式（Quirks Mode）对 HTML 页面的影响