doctype和Quirks模式

doctype:

　　告诉浏览器使用什么模式去渲染页面，可能会影响页面的css渲染和js代码的执行。

DTD :为了兼容旧的浏览器渲染方式，将DTD作为参数告诉浏览器使用什么模式渲染页面。始于IE6;

 

 

1、什么是混杂模式、什么是标准模式

　　混杂模式是一种向后兼容的解析方式，是实现IE5.5以下版本浏览器的渲染模式。不可取，无兼容性可言。

　　标准模式是一种要求严格的DTD，根据web标准去解析页面的模式。

　　近标准模式：尽可能遵循最新标准的情况下，兼容部分非标准的代码，如弃用的标签等。

 

2、两种模式的区别

• 盒模型的解析：混合模式盒模型的宽高=内容的宽高；标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。

　　　　　　混合模式：boxWidth = contentWidth

　　　　　　标准模式：boxWidth = contentWidth + padding*2 + border*2

 

　　诡异模式下（Quirks模式），IE的宽度和高度包括了padding和border。 

• 当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

　　行内元素的高度：

　　　　　　标准模式下：行内元素设置宽高无效；怪异模式下：有效；

　　margin:0 auto；设置水平居中：

　　　　　　标准模式：会使元素水平居中；怪异模式：无效

　　text- align:center：

　　　　　　IE6/7及IE8混杂模式（quirks模式）中可以使块级元素也居中对齐。；其他浏览器中，text-align:center仅作用于行内内容上。

    解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。

 

　　　　　　

 

 

3、判断两种模式

　　　　document.compatMode=="CSS1Compat" //标准模式

　　　　else   //混合模式