诡异模式:果然很诡异

很多老的页面都没有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过来了,当然只要注意点也没什么问题
原文地址:https://www.cnblogs.com/rhinemetal/p/2568461.html