馬上注冊(cè),歡迎加入IT之家社區(qū)大家庭。
您需要 登錄 才可以下載或查看,沒有賬號(hào)?注冊(cè)
x
作為開發(fā)人員,特別是作為Web的前端開發(fā)人員,最悲催的莫過于要不斷的,不斷的去調(diào)試各種瀏覽器的顯示效果,而這其中最讓人頭痛的莫過于MS下的IE系列瀏覽器,在IE系列中的調(diào)試我們將會(huì)發(fā)現(xiàn)沒有一個(gè)是好伺候的,于是不得不學(xué)習(xí)各種Hack技術(shù)來滿足各種瀏覽器之間的兼容。在這種痛苦中不斷的掙扎,MS可能也實(shí)在是看不下去了,于是在IE8開始,微軟引入了文檔兼容性,而這,終于可以讓前端的開發(fā)人員稍微能夠喘口氣。 文檔兼容性是對(duì) Microsoft Internet Explorer 6 中引入的兼容性模式的擴(kuò)展,使您可以選擇 Internet Explorer 用于顯示網(wǎng)頁的特定呈現(xiàn)模式。——微軟的官方文檔。 在這里先介紹兩個(gè)概念:瀏覽器模式(browser mode)和文檔模式(document mode)。這兩個(gè)模式的引入,讓我們?cè)贗E瀏覽器上能夠簡(jiǎn)單的處理兼容性問題,當(dāng)然,其實(shí)也并不簡(jiǎn)單,先看看這兩個(gè)概念的定義: 瀏覽器模式(browser mode):于切換IE針對(duì)該網(wǎng)頁的默認(rèn)文檔模式、對(duì)不同版本瀏覽器的條件備注解析、發(fā)送給網(wǎng)站服務(wù)器的用戶代理(User-Agent)字符串的值。網(wǎng)站可以根據(jù)瀏覽器返回的不同用戶代理字符串判斷瀏覽器的版本和安裝的功能,這樣就可以向不同的瀏覽器返回不同的頁面內(nèi)容。 默認(rèn)情況下,IE8的瀏覽器模式為IE8。用戶可以通過單擊地址欄旁邊的兼容性視圖按鈕來手動(dòng)切換到不同的瀏覽器模式。在IE8中,IE8兼容性視圖會(huì)以IE7文檔模式來顯示網(wǎng)頁,同時(shí)會(huì)向服務(wù)器發(fā)送IE7的用戶代理字符串。 文檔模式(document mode):用于指定IE的頁面排版引擎(Trident)以哪個(gè)版本的方式來解析并渲染網(wǎng)頁代碼。切換文檔模式會(huì)導(dǎo)致網(wǎng)頁被刷新,但不會(huì)更改用戶代理字符串中的版本號(hào),也不會(huì)從服務(wù)器重新下載網(wǎng)頁。切換瀏覽器模式的同時(shí),瀏覽器也會(huì)自動(dòng)切換到相應(yīng)的文檔模式。 簡(jiǎn)而言之:瀏覽器模式的改變,能夠改變請(qǐng)求中User Agent的值,讓服務(wù)器獲取后,能夠按照UA的值進(jìn)行對(duì)應(yīng)處理(如果服務(wù)器上有這個(gè)處理功能)。而文檔模式的改變只反映在本地的瀏覽器解析HTML上,對(duì)客戶端顯示會(huì)有影響,而對(duì)服務(wù)器透明。同時(shí),修改瀏覽器模式會(huì)影響文檔模式,反之卻不成立。 使用文檔兼容性的方法比較容易,就是在我們要反饋給客戶端的HTML代碼中的head中添加一個(gè)meta元素,用來描述當(dāng)前的文檔需要使用何種瀏覽器版本來解釋當(dāng)前文檔,代碼類似下面這樣:
- <html>
- <head>
- <!-- Mimic Internet Explorer 7 -->
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
- <title>測(cè)試模擬IE7瀏覽模式</title>
- </head>
- <body>
- <!--這里是你網(wǎng)站的內(nèi)容-->
- </body>
- </html>
復(fù)制代碼X-UA-compatible在使用中,大小寫不敏感,如果你需要客戶端模擬其他的瀏覽器版本來解析文檔你可以設(shè)置為對(duì)應(yīng)的版本即可,通常的設(shè)置有如下幾種: 文檔兼容性設(shè)置 X-UA-compatibleX-UA-Compatible值 | 說明 | IE=5 | 讓瀏覽器使用Quirks mode來顯示,實(shí)際上是使用Internet Explorer 7 的 Quirks 模式來顯示內(nèi)容,這個(gè)模式和IE5非常相似。 | IE=edge | 這個(gè)設(shè)置是讓IE使用當(dāng)前的最高版本進(jìn)行文檔的解析,官方文檔指明,edge模式僅適用在測(cè)試環(huán)境,不建議在生產(chǎn)環(huán)境中使用 | IE=7 | 使用標(biāo)準(zhǔn)IE7來處理 | IE=EmulateIE7 | 模擬IE7來處理,遵循 <!DOCTYPE> 指令,如果文檔有當(dāng)前有一個(gè)合法的<!DOCTYPE>,就使用IE7模式,否者使用Quirks模式(Internet Explorer 5 Quirks),對(duì)于大部分網(wǎng)站來說,這是首選的兼容性模式 | IE=8 | 標(biāo)準(zhǔn)IE8 | IE=EmulateIE8 | 模擬IE8,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明 | IE=9 | 標(biāo)準(zhǔn)IE9 | IE=EmulateIE9 | 模擬IE9,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明 | chrome=1 | 強(qiáng)制使用Chrome,需要IE下Chrome插件支持 | IE=EmulateIE10 | 模擬IE10 | IE=10 | 標(biāo)準(zhǔn)IE10,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明 |
當(dāng)然,除了這之外,你還可以設(shè)置其他值,甚至可以是7.5這樣的數(shù)值(個(gè)人不建議),IE解釋的時(shí)候,會(huì)嘗試將數(shù)值轉(zhuǎn)為最接近的版本。chrome這個(gè)是使用Chrome插件來處理當(dāng)前的文檔內(nèi)容,你也可以在HTML中插入下面的代碼,以便在用戶沒有安裝Chrome插件的時(shí)候,提醒用戶:
- <script src="http://ajax./ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
-
- <!--在需要使用的地方進(jìn)行Chrome Check-->
- <script>CFInstall.check();</script>
復(fù)制代碼這樣在用戶訪問的時(shí)候,如果發(fā)現(xiàn)沒有安裝Chrome插件,就會(huì)提示安裝Chrome插件。 到這里,我們基本上已經(jīng)知道怎么使用X-UA-Compatible標(biāo)頭了,讓我們更進(jìn)一步! 其實(shí),X-UA-Compatible不僅可以用meta元素放在頁面內(nèi),也可以在服務(wù)器上進(jìn)行配置,比如在IIS上配置默認(rèn)的Header,或者在使用.NET中配置web.config文件,讓服務(wù)器端配置上默認(rèn)的標(biāo)頭,這樣系統(tǒng)就有默認(rèn)的標(biāo)頭來指定全局的文檔模式。因?yàn)閱蝹€(gè)頁面的文檔模式設(shè)置會(huì)覆蓋默認(rèn)的文檔模式,因此,在某個(gè)需要特殊的文檔模式展示的頁面可以在進(jìn)行單獨(dú)配置meta元素即可。 在IIS7中的配置X-UA-Compatible標(biāo)頭如下:
|