标准模式(Standard Mode/Strict Mode)
怪异模式(Quirks Mode/Compalibility Mode)
共存原因:
标准模式是在W3C推出之后才使用的,通过在文档的开头使用DTD声明,让所有浏览器统一对代码的解析;但这时过去那些不带DTD声明的旧网页没法浏览,此时就需要转换到怪异模式,让浏览器用自己的方式去解析这些代码,也就是说在某些情况下,怪异模式反而能正常显示,因此标准模式和怪异模式都有各自存在的意义。
如何判断使用哪种模式:
基本上带DTD声明的浏览器都会采用标准模式,但也有在极少出现的某些情况下(浏览器不能识别的声明)带DTD声明却使用怪异模式的,比如使用HTML4以下(不包括HTML4)的DTD时,浏览器采用怪异模式。并且,IE5.5以及之前的版本只支持怪异模式。
其实除上面2种模式外,现在还有一种介于以上2种之间的模式——Almost Strict Mode(近乎标准模式)。现在Safari, Opera7.5+, IE8, 基于Becko的浏览器都使用这种模式。
如何切换:
IE6的触发——在DTD声明前加上xml声明
<? version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
所有IE的触发——在DTD声明前加上HTML注释
<!--Let IE into quirks mode--> 只要在DTD声明前加注释或者任何标签即可
<!DOCTYPE html>xml
标准模式与怪异模式对HTML页面的影响
主要表现在对盒模式(box mode)的解释中,而基本就是IE5-和IE6+的区别
1. 对盒模型中width、height的解析不同:
标准模式:内容的width,如IE8
怪异模式:边框+内边距+内容的width,如IE6
2.怪异模式中,内联元素前后不需要换行
3.盒子里的内容为空时,无论如何设置宽和高,都显示0%,it's empty!
4.margin值可为负,padding值不能为负
5.边框样式(border-style)默认为none
6.浮动元素未设置宽度时,其宽度会趋于0,压缩到内容能承受的最小宽度
7.内联元素的内容只有图片时,vertical-align的值(如table的单元格的table-cell)
标准模式:默认为baseline
怪异模式:默认为bottom
等。