定義文檔兼容性,讓IE按照指定的瀏覽器版本解析頁面

定義文檔兼容性,讓IE按照指定的瀏覽器版本解析頁面

文檔兼容性是對 Microsoft Internet Explorer 6 中引入的兼容性模式的擴展,使您可以選擇 Internet Explorer 用於顯示網頁的特定呈現模式。——微軟的官方文檔。

在這裏先介紹兩個概念:瀏覽器模式(browser mode)和文檔模式(document mode)。這兩個模式的引入,讓我們在IE瀏覽器上能夠簡單的處理兼容性問題,當然,其實也並不簡單,先看看這兩個概念的定義:

  瀏覽器模式(browser mode):於切換IE針對該網頁的默認文檔模式、對不同版本瀏覽器的條件備註解析、發送給網站服務器的用戶代理(User-Agent)字符串的值。網站可以根據瀏覽器返回的不同用戶代理字符串判斷瀏覽器的版本和安裝的功能,這樣就可以向不同的瀏覽器返回不同的頁面內容。

  默認情況下,IE8的瀏覽器模式爲IE8。用戶可以通過單擊地址欄旁邊的兼容性視圖按鈕來手動切換到不同的瀏覽器模式。在IE8中,IE8兼容性視圖會以IE7文檔模式來顯示網頁,同時會向服務器發送IE7的用戶代理字符串。

  文檔模式(document mode):用於指定IE的頁面排版引擎(Trident)以哪個版本的方式來解析並渲染網頁代碼。切換文檔模式會導致網頁被刷新,但不會更改用戶代理字符串中的版本號,也不會從服務器重新下載網頁。切換瀏覽器模式的同時,瀏覽器也會自動切換到相應的文檔模式。

  簡而言之:瀏覽器模式的改變,能夠改變請求中User Agent的值,讓服務器獲取後,能夠按照UA的值進行對應處理(如果服務器上有這個處理功能)。而文檔模式的改變只反映在本地的瀏覽器解析HTML上,對客戶端顯示會有影響,而對服務器透明。同時,修改瀏覽器模式會影響文檔模式,反之卻不成立。

簡而言之:瀏覽器模式的改變,能夠改變請求中User Agent的值,讓服務器獲取後,能夠按照UA的值進行對應處理(如果服務器上有這個處理功能)。而文檔模式的改變只反映在本地的瀏覽器解析HTML上,對客戶端顯示會有影響,而對服務器透明。同時,修改瀏覽器模式會影響文檔模式,反之卻不成立。

  使用文檔兼容性的方法比較容易,就是在我們要反饋給客戶端的HTML代碼中的head中添加一個meta元素,用來描述當前的文檔需要使用何種瀏覽器版本來解釋當前文檔,代碼類似下面這樣:

例如:

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7">
<title>測試模擬IE7瀏覽模式</title>
</head>
<body>
<!--這裏是你網站的內容-->
</body>
</html>

X-UA-compatible在使用中,大小寫不敏感,如果你需要客戶端模擬其他的瀏覽器版本來解析文檔你可以設置爲對應的版本即可,通常的設置有如下幾種:

X-UA-Compatible

說明

IE=5

讓瀏覽器使用Quirks mode來顯示,實際上是使用Internet Explorer 7 Quirks 模式來顯示內容,這個模式和IE5非常相似。

IE=edge

這個設置是讓IE使用當前的最高版本進行文檔的解析,官方文檔指明,edge模式僅適用在測試環境,不建議在生產環境中使用

IE=7

使用標準IE7來處理

IE=EmulateIE7

模擬IE7來處理,遵循 <!DOCTYPE> 指令,如果文檔有當前有一個合法的<!DOCTYPE>,就使用IE7模式,否者使用Quirks模式(Internet Explorer 5 Quirks),對於大部分網站來說,這是首選的兼容性模式

IE=8

標準IE8

IE=EmulateIE8

模擬IE8,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明

IE=9

標準IE9

IE=EmulateIE9

模擬IE9,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明

chrome=1

強制使用Chrome,需要IEChrome插件支持

IE=EmulateIE10

模擬IE10

IE=10

標準IE10,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明

X-UA-Compatible

說明

IE=5

讓瀏覽器使用Quirks mode來顯示,實際上是使用Internet Explorer 7 Quirks 模式來顯示內容,這個模式和IE5非常相似。

IE=edge

這個設置是讓IE使用當前的最高版本進行文檔的解析,官方文檔指明,edge模式僅適用在測試環境,不建議在生產環境中使用

IE=7

使用標準IE7來處理

IE=EmulateIE7

模擬IE7來處理,遵循 <!DOCTYPE> 指令,如果文檔有當前有一個合法的<!DOCTYPE>,就使用IE7模式,否者使用Quirks模式(Internet Explorer 5 Quirks),對於大部分網站來說,這是首選的兼容性模式

IE=8

標準IE8

IE=EmulateIE8

模擬IE8,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明

IE=9

標準IE9

IE=EmulateIE9

模擬IE9,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明

chrome=1

強制使用Chrome,需要IEChrome插件支持

IE=EmulateIE10

模擬IE10

IE=10

標準IE10,遵循 <!DOCTYPE> 指令,參照IE=EmulateIE7說明


發佈了20 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章