标准模式与怪异模式的共存缘由及其使用

来源：互联网发布：武汉大学法律硕士知乎编辑：程序博客网时间：2024/05/29 18:01

标准模式（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注释

只要在DTD声明前加注释或者任何标签即可

<!DOCTYPE html>xml

主要表现在对盒模式(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

等。

0 0