doctype和compatModel相关


一、doctype

1,严格模式与混杂模式的区分?如何触发这两种模式?

在 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>

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子节点,即 <body> 标签;

documentElement 是整个节点树的根节点root,即<html> 标签;

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声明,比如:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “”>

<!DOCTYPE html>

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

触发怪异模式

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前面

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写在<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设置了无效的值,所以跳过这里了。

X-UA-Compatible的特殊写法

触发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”。


13 responses on “doctype和compatModel相关

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>