诡异模式:果然很诡异
很多老的页面都没有doctype声明，浏览器对于那些没有doctype的网页是采用quirks mode解析的。通过quirks mode我们就可以解析早期的页面，防止老（90年代）的页面破相。不同的浏览器有不同的quirks模式，在ie6,7,8里，quirks模式可以有效的回到ie5.5的解析模式。但是在其他浏览器中，quirks模式和标准模式差别并不大。
简单的说，如果在ie6里启动了quirks模式，那么解析的时候会按照ie5.5的渲染模式展现
昨天有一个朋友给了我一个页面,说是只有在IE下会出现水平滚动条,我重新写了点简单的代码测试,发现设置了margin的0 auto可是页面不居中,最后我看了一下,页面的doctype用的是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
再查下不同浏览器的解析模式(浏览器渲染模式点这里),果然所有的浏览器解析这个doctype时都是以诡异模式解析的
好了,先看下
Quirks 模式和standerds模式的区别:
盒模型
在w3c标准中，如果设置一个元素的宽高，那么指的是元素的宽度和高度值，但是在quirks模式下，宽高显示的是实际所占用的宽高，也就是加上了padding和border(应该还有margin)的值。
可以设置行内元素的高度
在standerds模式下，对行内元素设置宽高是无效的，但是在quirks模式下是生效的。
可以设置百分比的高度
在standerds模式下，一个元素的高度是由其包含的内容来决定，如果父级元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的。但是quirks模式下是有效的（这个我没试过）
在quirks模式下margin:0 auto是不能实现水平居中的(好吧,这个就是上面的问题所在了)
给图片设置padding会失效
table中的字体属性不能继承
所以,文档的doctype是很重要的,它决定了浏览器的渲染模式,这些问题还是要注意了,我在dreamweaver里也经常新建的时候点错doctype,所以现在经常都直接复制doctype过来了,当然只要注意点也没什么问题
