学习笔记：浏览器模式和文档模式
一. 浏览器模式和文档模式的历史
浏览器模式和文档模式是历史遗留的问题，在浏览器大战时期，Netscape Navigator和IE对网页的实现方式差异较大，开发者要针对不同的浏览器开发不同的版本，实在闹腾。于是W3C制定HTML标准后，依照旧版本浏览器制作的页面很难使用，于是IE引入了比较折中的办法，一方面支持标准，一方面引入文档模式和浏览器模式让过去制作的页面依然能使用。 IE5.5引入了文档模式的概念，而这个概念是通过使用文档类型(doctype)切换实现的。
最初的两种文档模式是：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让IE的行为与IE5相同，而标准模式则让IE的行为更接近标准行为。在IE引入文档模型的概念后，其他浏览器也纷纷效仿。在此之后，IE8又提出一种所谓的准标准模式（almost standards mode）。这种模式下的浏览器特性很多都是符合标准的，但也不尽然。
二. 什么是浏览器模式？什么又是文档模式？他们有什么区别？
浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件注释解析，以及发送给网站服务器的用户代理(User-Agent)字符串的值。浏览器模式会影响服务器对客户端浏览器版本的判断，对条件注释有影响； 文档模式用于指定IE的页面排版引擎(Trident)的版本来渲染页面代码，对CSS hack有影响。切换文档模式不会更改用户代理字符串的版本号和从服务器重新下载网页。 总之，浏览器模式的切换会修改文档模式，会影响条件注释；而文档模式对页面渲染和CSS hack会有影响；
2.1 文档模式
文档模式的种类很多，但主流的就有以下三种： 标准模式(standards mode)、混杂模式(quirks mode)和准标准模式(almost standards mode)。
2.1.1 混杂模式
混杂模式下，在IE中排版引擎会模拟网景4和IE5的行为，页面以一种比较宽松的向后兼容的方式显示。Internet Explorer6~8中，混杂模式有效地冻结在IE5.5，而在其他浏览器中混杂模式是对准标准模式的少量偏移； 混杂模式中，浏览器违反了现代的Web格式规范。应尽量避免混杂模式的使用。
2.1.2 标准模式
标准模式下尽量执行HTML和CSS规范所指定的行为；不同的浏览器遵循不同的阶段，所以标准模式也不是一个单一目标。
2.1.3 准标准模式
准标准模式只包含很少的一部分怪异模式中的行为，最初的准标准模式只会影响表格中的图像，而后来各个浏览器又或多或少地进行了修改； 对于标准模式和混杂模式的差异，最显著的是盒模型（box model）和表格单元格高度的处理。 如果不考虑表格单元格的垂直尺寸处理差异，一般认为准标准模式和标准模式的行为近似。 目前一些最新版本的浏览器已经放弃了准标准模式。
标准模式和混杂模式的区别
在IE中，在混杂模式中使用的则是老式的专有盒模型，元素的width包含了padding和border；而在标准模式中使用的是标准的盒模型，元素的width不包含padding和border。
三. 模式的触发方式
浏览器根据DOCTYPE是否存在以及使用的DTD声明来选择要启动的文档模式。
3.1 混杂模式的触发方式
1 . 没有doctype声明； 2 . 在页面的第一行添加XML声明如"<?xml version="1.0" encoding="utf-8"?>"，在IE6下会触发混杂模式； 3 . <!DOCTYPE...>前面有空格或注释；
3.2 准标准模式的触发方式
加DOCTYPE声明，比如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2. 设置X-UA-Compatible触发；
<!-- HTML 4.0.1 严格型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- XHTML 1.0 严格型 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- HTML 5 --> <!DOCTYPE html>
四. 文档模式的检测
在JavaScript中可以通过documentMode来检测文档模式，而在IE6和IE7中是使用compatMode来确定文档模式的； IE6和IE7中的compatMode有两个可能的值“CSS1Compat”和“BackCompat ”，分别对应了IE6和IE7中的标准模式和怪异模式。 小结：一般情况下是没必要进行文档模式检测的，对于样式兼容可以写CSS hack，对于JavaScript推荐特性检测，而不是检测浏览器本身。
五. IE的浏览器模式
IE8有4种模式：IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式； IE9有7种模式: IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式、IE9几乎标准模式、IE9标准模式、XML模式；
5.1 X-UA-Compatible影响浏览模式
在IE8及以后的的IE浏览器中，支持X-UA-Compatible头，可以通过在服务器端设置HTTP头，或者在页面中插入标签来实现指定较低版本的浏览器模式来渲染页面。譬如：
HTTP: Header set X-UA-Compatible "IE=8" Meta: <meta http-equiv="X-UA-Compatible" content="IE=7"><!--以IE7模式渲染-->
备注：尽量不要在新开发的网页中使用这种技术，这种技术只应该作为新老网页更替过程中的过渡方案。由于目前新开发的网页都是尽量支持最新版本的浏览器的，所以这种技术也会慢慢被淘汰。
5.2 IE条件注释影响浏览器模式
用条件注释，可以实现不同的浏览器加载不同的CSS样式表或不同的内容。 条件表达式的两种写法：
<!--[if expression]> 注释内容 <![endif]--> <![if expression]> 注释内容 <![endif]>
其中，IE5会把第二种写法视为注释内容而忽略表达式，因此建议使用第一种写法。 条件表达式的常见用法，譬如：
<!--[if IE]> <p>IE浏览器</p> <![endif]--> <!--[if IE 7]> <p>Internet Explorer 7</p> <![endif]--> <!--[if gte IE 7]> <p>IE 7 或者更高版本.</p> <![endif]--> <!--[if (gte IE 5.5)&(lt IE 7)]> <p>IE 5.5 或者 IE 6.</p> <![endif]--> <!--[if lt IE 5.5]> <p>低于IE5.5</p> <![endif]--> <!--[if true]> 您目前使用的浏览器支持条件注释 <![endif]-->
条件注释中用到的关键词：
& 与 | 或 ! 非 lt 小于 lte 小于或者等于 gt 大于 gte 大于或者等于 ( ) 子表达式
六. 总结
尽量避免触发混杂模式和准标准模式，推荐使用HTML5可向后兼容的标准模式doctype声明<!DOCTYPE html>； 在JS中，推荐使用能力检测，而不是浏览器检测； 尽量避免用在高版本浏览器下指定低版本的文档模式； 建议使用IE条件注释来解决特定IE版本中的样式缺陷问题，尽量避免在css中使用css hack。
参考资料：
浏览器模式
浏览器兼容模式 总结
说说IE浏览器的条件注释(Conditional Comments)