标准模式与混杂模式.docx

什么是Doctype什么是标准模式与混杂模式？一、什么是Doctype？DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。以XHTML 1.0为例：XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。1过渡的一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：2严格的一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如等。严格的DTD的写法如下：3框架的一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：ps：使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。二、什么是标准模式与混杂模式？不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析，但在某些情况下也会影响到JavaScript的解释执行。1、文档模式目前有四种：混杂模式（quirks mode）/让IE的行为与（包含非标准特性的）IE5相同标准模式（standards mode）/让IE的行为更接近标准行为准标准模式（almost standards mode）/这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。超级标准模式:/IE8引入的一种新的文档模式，超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。ps：总的来看，混杂模式让IE像IE5，标准模式使用IE7的呈现引擎，而超级标准模式则是IE8的默认文档模式。2、如何触发文档模式：触发混杂模式:如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。触发标准模式:触发准标准模式:IE8中关闭超级标准模式：/content属性中IE的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的IE设计的站点和页面。IE 版本实在太多了，而且每个版本又变化很大，出到 IE9 连微软都开始担心开发者能否搞定，于是就有了这篇官方博文，详细介绍了自 IE8 起引入的兼容性解决方案： Testing sites with Browser Mode vs. Doc Mode 浏览器模式 不受程序员控制，用户可以自由选择合适的ie版本，影响了以下三个方面： 1.发送给服务器合适的UA 2.控制页面中的条件注释 。（条件注释依赖于 UA 串） 3.对应了默认的文本模式（渲染模式，IE8 引入document.Mode）。 关于默认对应关系可见： updated 2010-10-24 ie UA 判断需要考虑渲染引擎版本 trident 兼容模式和其他模式的区别在于，兼容模式会在UA中表示自己是 MSie7 但是同时也会表示自己的渲染引擎是trident 5.0,如下： Js代码 1. Mozilla/4.0(compatible;MSIE7.0;WindowsNT5.1;Trident/5.0;.NETCLR1.1.4322;.NETCLR2.0.50727)Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)但是选择ie7模式时，则会完全丢弃掉trident版本： Js代码 1. Mozilla/4.0(compatible;MSIE7.0;WindowsNT5.1;.NETCLR1.1.4322;.NETCLR2.0.50727)Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 一般来说，终端用户可选择兼容模式（地址栏兼容按钮），但是开发者通过 trident 仍然可以知道真正的浏览器版本，其他模式主要用于程序员调试（程序完全不知），终端用户如果选择后果自负！ 比如一个 ie9 问题，当程序设置 document mode 处于 ie9 时，透明度 filter 设置会失效即透明失效，即使设置了opacity，这是就可以根据trident来判断，无论是 MSIE7.0 (兼容模式)还是 MSIE9.0(ie9模式) 具体哪种模式受微软白名单控制以及用户选择，都把filter去掉，具体方法则是初始化时在页面body上加入class:tridentxx，在样式中写明： Html代码 1. 2. 3. .trident5xx 4. filter:none; 5. .trident5 xx filter:none; 文本模式 直接和界面显示相关，用来指示选择具体的渲染引擎，例如 ie8 标准模式下不支持 css表达式。脚本可以通过 document.documentMode 探测。 updated 2010-11-10 当切换 document.documentMode ，不仅会切换渲染引擎，而且会切换 js 引擎，可在切换前后分别执行以下程序测试： Js代码 1. typeofObject.createtypeof Object.create可以通过以下方面由程序员控制 1. 页面中的 DOCTYPE 属性。 需要注意的是：实际上从 ie8 起存在 3 种渲染机制，目前推荐 触发完全标准模式。 其他详见：Quirks mode、Almost standards mode、Standards mode 2. X-UA-Compatible Meta tag 可以在 head 开头 插入 meta 标签： Html代码1. mode 取值结合 1 DOCTYPE 会直接影响到使用哪个渲染引擎： 更详细的见这里：how-ie8-determines-document-mode 3. HTTP Header 同2，不过直接操作 http 协议头，需要注意的是 2 的优先级比 3 高。 最后 如果还不能够确定，那么 ie 的兼容性列表 也会影响到具体表现，可在 res:/iecompat.dll/iecompatdata.xml 查看，用户也可在 工具-兼容性视图设置 下手动设置，将特定网站加入兼容性列表。 attribute 与 property , content value 与 dom value attribute 的判断读取 在 ie 9 之前是非常混乱的事情，节点的 .attributes 在标准浏览器下只会返回用户设置的属性节点集合，而在 ie8 下则会把所有可以设置的属性都返回过来，特别在需要知道某个元素是否被用户设置了属性时就会十分麻烦，需要遍历.attributes 一一判断 specified 是否为 true ，而 documentMode 也会切换 js 引擎，在 ie8 的文本模式选择了 ie7 标准时，其属性方面和真实的 ie7 表现一致，那么这时为了鲁棒性需要这样判断： Js代码 1. /直接判断引擎，防止兼容性模式影响 2. varieEngine=(function() 3. if(!UA.ie)return; 4. returndocument.documentMode|UA.ie; 5. )(); 6. 7. varhasAttributes=ieEngine8? 8. function(el) 9. varattributes=el.attributes; 10. for(vari=0;iattributes.length;i+) 11. varattribute=attributesi; 12. if(attribute.specified) 13. returntrue; 14. 15. 16. returnfalse; 17. :function(el) 18. /删除firefox自己添加的标志 19. UA.gecko&el.removeAttribute(_moz_dirty); 20. returnel.hasAttributes(); 21. /直接判断引擎，防止兼容性模式影响var ieEngine=(function() if (!UA.ie) return; return document.documentMode | UA.ie;)();var hasAttributes = ieEngine 8 ?function (el) var attributes = el.attributes; for (var i = 0; i attributes.length; i+) var attribute = attributesi; if (attribute.specified) return true; return false; : function (el) /删除firefox自己添加的标志 UA.gecko & el.removeAttribute(_moz_dirty); return el.hasAttributes(); 关于 attribute 与 property 的关系就更复杂了，在 ie6,7 下表示 content value 的attribute 与表示 dom value 的 property 混淆了，并且在 ie8 documentMode 为混杂以及 ie7 模式下和 ie6,7 保持一致，如下： Html代码 1. test2. 3. vara=document.getElementById(t); 4. alert(a.getAttribute(href); 5. alert(a.getAttribute(href,2); 6. testvar a=document.getElementById(t);alert(a.getAttribute(href);alert(a.getAttribute(href,2);另一点需要注意的是，设置 innerHTML 在 ie6,7 下会触发设置的 content value 转换成为dom value，当然这只对 html 相关属性起作用，只有 html 属性才可能有不同于 content value 的 dom value。如下： 1. 2. test 3. 4. 5. vartt=document.getElementById(tt); 6. alert(tt.innerHTML); 7. tt.innerHTML=tt.innerHTML; 8. alert(tt.innerHTML); 9. testvar tt=document.getElementById(tt);alert(tt.innerHTML);tt.innerHTML=tt.innerHTML;alert(tt.innerHTML);单个属性节点存在判断： 在 ie 下可用：1. elem.attributesname&elem.attributesname.specifiedelem.attributesname & elem.attributesname.specified 但是对于多个单词组成的属性，例如 tabindex 会出问题，最好用1. varname=tabindex; 2. elem.tabIndex=1; 3. varattr=elem.getAttributeNode(name); 4. returnattr?attr.specified:false;var name=tabindex;elem.tabIndex=1;var attr = elem.getAttributeNode(name);return attr ? attr.specified : false;来判断。而对于 attribute 和 property 还没有完全分开，如果设置自定义属性/expando，那么会发现无论读 expando 还是 attribute 都可以读出来 :(1. varo=docume