doctype和compatModel相关

阅读更多
作者:zccst

一、doctype

1,严格模式与混杂模式的区分?如何触发这两种模式?
在 HTML 4.01 和 XHTML 中分别有三种 声明。在 HTML5 中只有一种。

1.过渡的(Transitional):要求非常宽松

混杂模式:浏览器对XHTML的解析较为宽松。允许使用4.01中的标签,但必须符合XHTML的语法。

2.严格的(Strict):不能使用任何表现层的标识和属性,例如


严格模式:使用此类型的网页,浏览器解析将相对严格,不允许使用任何表现样式的标识和属性,比如在元素中直接使用background-color背景色属性。

3.框架的(Frameset):专门针对框架页面设计使用的DTD


如果不写DOCTYPE的话,会造成低版本的ie不兼容,产生bug


在html5中,



2,document.documentElement和document.body区别
页面具有 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子节点,即 标签;
documentElement 是整个节点树的根节点root,即 标签;

DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。



二,compatModel
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;


三、面试题

触发标准模式
1、加DOCTYPE声明,比如:



2、设置X-UA-Compatible触发。


触发怪异模式
1、无doctype声明、定义旧的HTML版本(HTML4以下,例如3.2)
2、加XML声明,可在ie6下触发
< xml version="1.0" encoding="utf-8" >

3、在XML声明和XHTML的DOCTYPE之间加入HTML注释,可在ie7下触发 < xml version="1.0" encoding="utf-8" >


5、放在

X-UA-Compatible
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写在

你可能感兴趣的:(html)