標準模式與混雜模式.docx

什么是Doctype什么是標準模式與混雜模式？一、什么是Doctype？DOCTYPE是Document Type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTML）的版本。要想制作符合標準的頁面，一個必不可少的關(guān)鍵組成部分就是DOCTYPE聲明。只有確定了一個正確的DOCTYPE，XHTML里的標識和CSS才能正常生效。以XHTML 1.0為例：XHTML 1.0中有3種DTD（文檔類型定義）聲明可以選擇：過渡的（Transitional）、嚴格的（Strict）和框架的（Frameset）。這里分別介紹如下。1過渡的一種要求不很嚴格的DTD，允許在頁面中使用HTML4.01的標識（符合xhtml語法標準）。過渡的DTD的寫法如下：2嚴格的一種要求嚴格的DTD，不允許使用任何表現(xiàn)層的標識和屬性，例如等。嚴格的DTD的寫法如下：3框架的一種專門針對框架頁面所使用的DTD，當頁面中含有框架元素時，就要采用這種DTD?？蚣艿腄TD的寫法如下：ps：使用嚴格的DTD來制作頁面，當然是最理想的方式。但是，對于沒有深入了解Web標準的網(wǎng)頁設(shè)計者，比較合適的是使用過渡的DTD。因為這種DTD還允許使用表現(xiàn)層的標識、元素和屬性，比較適合大多數(shù)網(wǎng)頁制作人員。二、什么是標準模式與混雜模式？不同文檔模式主要影響CSS內(nèi)容的呈現(xiàn)，尤其是瀏覽器對盒模型的解析，但在某些情況下也會影響到JavaScript的解釋執(zhí)行。1、文檔模式目前有四種：混雜模式（quirks mode）/讓IE的行為與（包含非標準特性的）IE5相同標準模式（standards mode）/讓IE的行為更接近標準行為準標準模式（almost standards mode）/這種模式下的瀏覽器特性有很多都是符合標準的，不標準的地方主要體現(xiàn)在處理圖片間隙的時候（在表格中使用圖片時問題最明顯）。超級標準模式:/IE8引入的一種新的文檔模式，超級文檔模式可以讓IE以其所有版本中最符合標準的方式來解釋網(wǎng)頁內(nèi)容。ps：總的來看，混雜模式讓IE像IE5，標準模式使用IE7的呈現(xiàn)引擎，而超級標準模式則是IE8的默認文檔模式。2、如何觸發(fā)文檔模式：觸發(fā)混雜模式:如果在文檔開始處沒有發(fā)現(xiàn)文檔類型聲明，則所有瀏覽器都會默認開啟混雜模式。但采用混雜模式不是什么值得推薦的做法，因為不同瀏覽器在這種模式下的行為差異非常大，如果不使用某些hack技術(shù)，跨瀏覽器的行為根本就沒有一致性可言。觸發(fā)標準模式:觸發(fā)準標準模式:IE8中關(guān)閉超級標準模式：/content屬性中IE的值用于指定使用哪個版本的呈現(xiàn)引擎來呈現(xiàn)頁面。設(shè)計這個值的目的就是為了向后兼容那些專門為老版本的IE設(shè)計的站點和頁面。IE 版本實在太多了，而且每個版本又變化很大，出到 IE9 連微軟都開始擔心開發(fā)者能否搞定，于是就有了這篇官方博文，詳細介紹了自 IE8 起引入的兼容性解決方案： Testing sites with Browser Mode vs. Doc Mode 瀏覽器模式 不受程序員控制，用戶可以自由選擇合適的ie版本，影響了以下三個方面： 1.發(fā)送給服務器合適的UA 2.控制頁面中的條件注釋 。（條件注釋依賴于 UA 串） 3.對應了默認的文本模式（渲染模式，IE8 引入document.Mode）。 關(guān)于默認對應關(guān)系可見： updated 2010-10-24 ie UA 判斷需要考慮渲染引擎版本 trident 兼容模式和其他模式的區(qū)別在于，兼容模式會在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) 一般來說，終端用戶可選擇兼容模式（地址欄兼容按鈕），但是開發(fā)者通過 trident 仍然可以知道真正的瀏覽器版本，其他模式主要用于程序員調(diào)試（程序完全不知），終端用戶如果選擇后果自負！ 比如一個 ie9 問題，當程序設(shè)置 document mode 處于 ie9 時，透明度 filter 設(shè)置會失效即透明失效，即使設(shè)置了opacity，這是就可以根據(jù)trident來判斷，無論是 MSIE7.0 (兼容模式)還是 MSIE9.0(ie9模式) 具體哪種模式受微軟白名單控制以及用戶選擇，都把filter去掉，具體方法則是初始化時在頁面body上加入class:tridentxx，在樣式中寫明： Html代碼 1. 2. 3. .trident5xx 4. filter:none; 5. .trident5 xx filter:none; 文本模式 直接和界面顯示相關(guān)，用來指示選擇具體的渲染引擎，例如 ie8 標準模式下不支持 css表達式。腳本可以通過 document.documentMode 探測。 updated 2010-11-10 當切換 document.documentMode ，不僅會切換渲染引擎，而且會切換 js 引擎，可在切換前后分別執(zhí)行以下程序測試： Js代碼 1. typeofObject.createtypeof Object.create可以通過以下方面由程序員控制 1. 頁面中的 DOCTYPE 屬性。 需要注意的是：實際上從 ie8 起存在 3 種渲染機制，目前推薦 觸發(fā)完全標準模式。 其他詳見：Quirks mode、Almost standards mode、Standards mode 2. X-UA-Compatible Meta tag 可以在 head 開頭 插入 meta 標簽： Html代碼1. mode 取值結(jié)合 1 DOCTYPE 會直接影響到使用哪個渲染引擎： 更詳細的見這里：how-ie8-determines-document-mode 3. HTTP Header 同2，不過直接操作 http 協(xié)議頭，需要注意的是 2 的優(yōu)先級比 3 高。 最后 如果還不能夠確定，那么 ie 的兼容性列表 也會影響到具體表現(xiàn)，可在 res:/iecompat.dll/iecompatdata.xml 查看，用戶也可在 工具-兼容性視圖設(shè)置 下手動設(shè)置，將特定網(wǎng)站加入兼容性列表。 attribute 與 property , content value 與 dom value attribute 的判斷讀取 在 ie 9 之前是非常混亂的事情，節(jié)點的 .attributes 在標準瀏覽器下只會返回用戶設(shè)置的屬性節(jié)點集合，而在 ie8 下則會把所有可以設(shè)置的屬性都返回過來，特別在需要知道某個元素是否被用戶設(shè)置了屬性時就會十分麻煩，需要遍歷.attributes 一一判斷 specified 是否為 true ，而 documentMode 也會切換 js 引擎，在 ie8 的文本模式選擇了 ie7 標準時，其屬性方面和真實的 ie7 表現(xiàn)一致，那么這時為了魯棒性需要這樣判斷： 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(); 關(guān)于 attribute 與 property 的關(guān)系就更復雜了，在 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);另一點需要注意的是，設(shè)置 innerHTML 在 ie6,7 下會觸發(fā)設(shè)置的 content value 轉(zhuǎn)換成為dom value，當然這只對 html 相關(guān)屬性起作用，只有 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);單個屬性節(jié)點存在判斷： 在 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 還沒有完全分開，如果設(shè)置自定義屬性/expando，那么會發(fā)現(xiàn)無論讀 expando 還是 attribute 都可以讀出來 :(1. varo=docume