【卜維丰】IE8 相容性檢視 Compatibility View

IE8 相容性檢視 Compatibility View

5/3 11'

根據微軟官網的說明：

當您瀏覽網站時，有時一些網站無法正確顯示，網頁中顯示的功能表、影像和文字方塊有些混亂而且不在適當的位置。這究竟是怎麼一回事？可能的原因是，這個網站可能是針對舊版的 Internet Explorer 所設計。這時候該怎麼辦呢？您可以試著按一下 [相容性檢視] 按鈕。

相容性檢視按鈕

在 [相容性檢視] 中，網站的顯示方式就像在舊版 Internet Explorer 中檢視網站一樣，通常問題就會迎刃而解。只要您對網站按一下按鈕，當您再度瀏覽該網站，Internet Explorer 9 就會自動以 [相容性檢視] 顯示，不必再按此按鈕。 (如果您想要讓網站回到 Internet Explorer 9 的瀏覽模式，只要再按一下 [相容性檢視] 按鈕)。

同樣的情況，在 IE 8 開始就存在。

所幸，IE 預設，不會使用相容性檢視，不過，近端網路則預設使用相容性檢視，也就是你在自己電腦上撰寫網頁，使用 IE 測試，網址可能是 http://localhost 或 http://192.168.x.x 之類，就會使用相容性檢視。

相容性檢視，IE 為了向下相容所設計的功能，大概微軟再也扛不住不遵循標準的聲浪，但直接改正，對過去已經設計成 IE Only 數以億計的網頁，又沒法交待，所以發明了這個功能。

無論如何，相信你現在隨隨便便寫出來的 Javascript 、CSS 都是按標準規格來寫，所有瀏覽器都相容，唯獨近端測試時 IE 不配合，就算升級到最新版，也沒用，就相容性檢視在搞鬼。

如果針對單一網站(尤其近端網站)要改變相容性檢視，以下動作作一次即可：

IEMode 1

IEMode 2

IEMode 3

影響

IE 相容性檢視最大的影響就是把自己降格成為舊版瀏覽器，也就是如果你在頁面裡寫了很多現代的語法，就無法反應出效果，例如 IE 自家的 filter 屬性。

更正

最簡單的方式，是在 <head> 區塊中加入以下 meta tag，強制 IE 標準模式執行。

檢測

檢測使用者的 IE 開啟在那一種模式，和 IE 回傳的 userAgent 有關係，同一個版本的 IE 在不同模式下，回傳的 userAgent 不同，簡單的說，IE 自己會因為瀏覽模式而偽裝自己。IE 的 userAgent 種類，有興趣的人，可以看這裡。

舉個例子，Windows 7 上的 IE 8，回傳的 userAgent 可能是

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; .NET4.0C)

如果切換到相容性檢視，userAgent 變成

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; .NET4.0C)

在 Windows XP 上的 IE 8，回傳的 userAgent 可能是

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 2.0.50727)

切換到相容性檢視，userAgent 變成

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 2.0.50727)

所以，相容性檢視這種摩登玩意兒，只有在 IE 8+ 才存在，所以 IE 7 等，就不討論了。

首先要辨識 IE 8，關鍵字就是 Trident/4.0 (IE 9 則是 Trident/5.0)。所以，當測出來的 IE 版本是 8 (或以上)，但卻又回傳 MSIE 7.0 這種資訊，就是代表相容性檢視被開啟了。

這時，檢查一下 IE 專有屬性 document.documentMode，在 IE 8 (或以上)，documentMode 回傳值可能是

5: 代表 Quirks 模式，就是傳說中的 IE 5；7: 代表相容性檢視模式；8: 代表 IE 8 標準模式。

事實上 IE 8 在標準模式下對於 DOM/CSS 的表現，已經可以接受(除非你堅持一點 filter 不寫在 CSS 裡)

檢測程式碼

以下程式碼原始資料來自 http://blog.strictly-software.com/....with.html，2009 年的資料，那年頭還沒有 IE 9，所以原始碼中沒有考慮到 IE 9，於是，我加了點小修改

function IEVersion(){
	//original by http://blog.strictly-software.com/2009/03/detecting-ie-8-compatibility-modes-with.html
	var _n=navigator,_w=window,_d=document;
	var version="NA";
	var na=_n.userAgent;
	var ieDocMode="NA";
	var ie8BrowserMode="NA";
	// Look for msie and make sure its not opera in disguise
	if(/msie/i.test(na) && (!_w.opera)){
		// also check for spoofers by checking known IE objects
		if(_w.attachEvent && _w.ActiveXObject){
			version=na.match(/trident\/4/ig);
			if (version){
				version=8;
			}else{
				// Get version displayed in UA although if its IE 8 running in 7 or compat mode it will appear as 7
				version=(na.match(/trident\/5/ig))?'9':(na.match( /.+ie\s([\d.]+)/i ) || [])[1];
			}
			// Its IE 8 pretending to be IE 7 or in compat mode
			if(parseInt(version)==7){
				// documentMode is only supported in IE 8 so we know if its here its really IE 8
				if(_d.documentMode){
					version = 8; //reset? change if you need to
					// IE in Compat mode will mention Trident in the useragent
					if(/trident\/\d/i.test(na)){
						ie8BrowserMode = "Compat Mode";
					// if it doesn't then its running in IE 7 mode
					}else{
						ie8BrowserMode = "IE 7 Mode";
					}
				}
			}else if(parseInt(version)==8){
				// IE 8 will always have documentMode available
				if(_d.documentMode){ ie8BrowserMode = "IE 8 Mode";}
			}
			// If we are in IE 8 (any mode) or previous versions of IE we check for the documentMode or compatMode for pre 8 versions
			ieDocMode = (_d.documentMode) ? _d.documentMode : (_d.compatMode && _d.compatMode=="CSS1Compat") ? 7 : 5;//default to quirks mode IE5
		}
	}

	return {
		"UserAgent" : na,
		"Version" : version,
		"BrowserMode" : ie8BrowserMode,
		"DocMode": ieDocMode
	}
}

使用例如下：

var IEMode=IEVersion();
if (IEMode.Version<8){
	//叫他換瀏覽器
}else{
	if (IEMode.DocMode==7){
		//相容模式開啟
	}
}

至於你要不要測 DocMode==5.....呃.....

同意轉載，不過麻煩看一下轉載需知

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

IE8 相容性檢視 Compatibility View

影響

更正

檢測

檢測程式碼

以下為文章回應區