作者：zccst
[size=large]一、doctype[/size]
[b]1，严格模式与混杂模式的区分？如何触发这两种模式？ [/b]
在 HTML 4.01 和 XHTML 中分别有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种。
1.过渡的(Transitional)：要求非常宽松
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
混杂模式：浏览器对XHTML的解析较为宽松。允许使用4.01中的标签，但必须符合XHTML的语法。
2.严格的(Strict)：不能使用任何表现层的标识和属性，例如<br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
严格模式：使用此类型的网页，浏览器解析将相对严格，不允许使用任何表现样式的标识和属性，比如在元素中直接使用background-color背景色属性。
3.框架的(Frameset)：专门针对框架页面设计使用的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如果不写DOCTYPE的话，会造成低版本的ie不兼容，产生bug
在html5中，<!DOCTYPE html>
[b]2，document.documentElement和document.body区别[/b]
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
[size=large]二，compatModel[/size]
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释：
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度document.documentElement.clientWidth。
我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
[size=large]三、面试题[/size]
[b]触发标准模式[/b]
1、加DOCTYPE声明,比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<!DOCTYPE html>
2、设置X-UA-Compatible触发。
[b]触发怪异模式[/b]
1、无doctype声明、定义旧的HTML版本（HTML4以下,例如3.2）
2、加XML声明，可在ie6下触发
< xml version="1.0" encoding="utf-8" >
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在ie7下触发 < xml version="1.0" encoding="utf-8" >
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
5、<!--->放在<!DOCTYPE前面
[b]X-UA-Compatible[/b]
X-UA-Compatible只有IE>=8才识别，所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
IE6-IE9下，怪异模式都在IE5.5下。
不需要写X-UA-Compatible，用css也完全可以搞定各个版本IE的解析不同。
IE=(0<= 值 <7) - 触发怪异模式(无论页面是否有DOCTYPE)，注：这里的怪异模式和IE8下的有点不同，测试发现"-"、"_"这两个css hack符号，IE8怪异下是都识别的，IE9怪异下不识别"-"。
IE=7(7<= 值 <8) - 强制IE7标准(无论页面是否有DOCTYPE)
IE=8(8<= 值 <9) - 强制IE8标准，有doctype-使用IE8几乎标准模式(或IE8标准)，无doctype-IE8标准
IE=EmulateIE7、EmulateIE8 和上面IE8的情况一样
IE=9、IE=Edge(值 >=9 ) - 有doctype-使用几乎标准模式(或IE9标准)。和IE8一样，靠doctype来选择IE9几乎标准，或IE9标准模式；无doctype-IE9标准。
IE=(值 <0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA-Compatible meta写在<link>或<script>标签后的，这些情况和无X-UA-Compatible是一样的：首先判断"兼容性视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype-怪异模式。
注1：把X-UA-Compatible写在<link>或<script>标签下面，X-UA-Compatible的设置无效。
注2：页面、服务器HTTP Header都设置了X-UA-Compatible的情况，使用页面的X-UA-Compatible设置。页面无X-UA-Compatible，才使用HTTP Header设置的值。
注3：几乎标准模式的意思和触发，下面的"Almost Standards Mode"有说明。
注4：IE=xx的值，ie会尝试xx转换为最接近的值。比如：IE=7.789 -> IE=7；介于5、6之间的->IE=5；大于等于8的->IE=8。
注5：IE=4、IE=3、IE=0.1、IE=-7 这些小于5的，包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd，和无X-UA-Compatible一样一样滴。可以理解为X-UA-Compatible设置了无效的值，所以跳过这里了。
[b]X-UA-Compatible的特殊写法[/b]
触发Google Chrome Frame：
<meta http-equiv="X-UA-Compatible" content="chrome=1">
可以和IE的X-UA-Compatible混搭：比如：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">。
这样写的好处：可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1"，可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。
[size=large]一、doctype[/size]
[b]1，严格模式与混杂模式的区分？如何触发这两种模式？ [/b]
在 HTML 4.01 和 XHTML 中分别有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种。
1.过渡的(Transitional)：要求非常宽松
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
混杂模式：浏览器对XHTML的解析较为宽松。允许使用4.01中的标签，但必须符合XHTML的语法。
2.严格的(Strict)：不能使用任何表现层的标识和属性，例如<br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
严格模式：使用此类型的网页，浏览器解析将相对严格，不允许使用任何表现样式的标识和属性，比如在元素中直接使用background-color背景色属性。
3.框架的(Frameset)：专门针对框架页面设计使用的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如果不写DOCTYPE的话，会造成低版本的ie不兼容，产生bug
在html5中，<!DOCTYPE html>
[b]2，document.documentElement和document.body区别[/b]
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
var scrollTop = window.pageYOffset //用于FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
[size=large]二，compatModel[/size]
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释：
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度document.documentElement.clientWidth。
我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
[size=large]三、面试题[/size]
[b]触发标准模式[/b]
1、加DOCTYPE声明,比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<!DOCTYPE html>
2、设置X-UA-Compatible触发。
[b]触发怪异模式[/b]
1、无doctype声明、定义旧的HTML版本（HTML4以下,例如3.2）
2、加XML声明，可在ie6下触发
< xml version="1.0" encoding="utf-8" >
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在ie7下触发 < xml version="1.0" encoding="utf-8" >
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
5、<!--->放在<!DOCTYPE前面
[b]X-UA-Compatible[/b]
X-UA-Compatible只有IE>=8才识别，所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
IE6-IE9下，怪异模式都在IE5.5下。
不需要写X-UA-Compatible，用css也完全可以搞定各个版本IE的解析不同。
IE=(0<= 值 <7) - 触发怪异模式(无论页面是否有DOCTYPE)，注：这里的怪异模式和IE8下的有点不同，测试发现"-"、"_"这两个css hack符号，IE8怪异下是都识别的，IE9怪异下不识别"-"。
IE=7(7<= 值 <8) - 强制IE7标准(无论页面是否有DOCTYPE)
IE=8(8<= 值 <9) - 强制IE8标准，有doctype-使用IE8几乎标准模式(或IE8标准)，无doctype-IE8标准
IE=EmulateIE7、EmulateIE8 和上面IE8的情况一样
IE=9、IE=Edge(值 >=9 ) - 有doctype-使用几乎标准模式(或IE9标准)。和IE8一样，靠doctype来选择IE9几乎标准，或IE9标准模式；无doctype-IE9标准。
IE=(值 <0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA-Compatible meta写在<link>或<script>标签后的，这些情况和无X-UA-Compatible是一样的：首先判断"兼容性视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype-怪异模式。
注1：把X-UA-Compatible写在<link>或<script>标签下面，X-UA-Compatible的设置无效。
注2：页面、服务器HTTP Header都设置了X-UA-Compatible的情况，使用页面的X-UA-Compatible设置。页面无X-UA-Compatible，才使用HTTP Header设置的值。
注3：几乎标准模式的意思和触发，下面的"Almost Standards Mode"有说明。
注4：IE=xx的值，ie会尝试xx转换为最接近的值。比如：IE=7.789 -> IE=7；介于5、6之间的->IE=5；大于等于8的->IE=8。
注5：IE=4、IE=3、IE=0.1、IE=-7 这些小于5的，包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd，和无X-UA-Compatible一样一样滴。可以理解为X-UA-Compatible设置了无效的值，所以跳过这里了。
[b]X-UA-Compatible的特殊写法[/b]
触发Google Chrome Frame：
<meta http-equiv="X-UA-Compatible" content="chrome=1">
可以和IE的X-UA-Compatible混搭：比如：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">。
这样写的好处：可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1"，可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
