【HTML】之混杂模式和严格模式

2022-05-27 18:44:14

一、简而言之

区别：严格模式是浏览器根据规范去显示页面；混杂模式是以一种向后兼容的方式去显示。

意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）。

触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。

二、浏览器模式

当浏览器厂商开始创建与W3C标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式（standards mode）和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

Mozilla和Safari还有第三种模式，称为”几乎标准的模式（almost standards mode）”，除了在处理表格的方式上有一些细微的差异之外，这种模式与标准模式相同。

三、差异

对于这两种模式之间的差异，最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。

四、触发

（1）如何触发两种模式：
加入xml头部声明，可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。

（2）IE6的触发：在XHTML的DOCTYPE前加入XML声明，
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

（3）IE7的触发：在XML声明和XHTML的DOCTYPE之间，加入HTML注释
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

（4）IE6和IE7都可以触发的：在HTML4.01的DOCTYPE文档头部，加入HTML注释
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

（5）在页面顶部加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ，将触发“怪异模式”

（6）没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本上所有的浏览器都是使用quirks mode呈现

五、判断

方法如下，执行代码

alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式

六、意义

各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。
所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则，刻意触发混杂模式没有任何意义。

区分是标准模式还是混合模式，有其重要的意义所在，那就是确定页面解析时，使用的是“标准盒Box模型“，还是使用“传统Box模型“。

七、拓展

IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，

而在IE6和其他浏览器上，div宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。

这时我们可以做如下修改
div{
    width:300px!important;
    width /**/:340px;
    margin:0 10px 0 10px
}

关于这个/**/是什么？也不太明白，只知道IE5和firefox都支持，但IE6不支持。

在mozilla firefox 和 IE中的BOX模型

其解释中，因不一致导致相差2px的宽度，其解决方法：
div{
margin:30px!important;
margin:28px;
}
注意这两个margin的顺序一定不能写反，!important这个属性IE6不能识别，但IE7能识别，且IE8属于标准浏览器类型；故也支持。别的浏览器可以识别。所以在IE6下其实解释成这样：
div{
margin:30px;
margin:28px
}
重复定义的话按照最后一个来执行。