以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

IE8 相容性檢視 Compatibility View

5/3 11' icon

根據微軟官網的說明:

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

相容性檢視按鈕的圖片相容性檢視按鈕

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

同樣的情況,在 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 標準模式執行。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

檢測

檢測使用者的 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.....呃.....

以下為文章回應區

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

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