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){
			if (version){
				// 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
				// documentMode is only supported in IE 8 so we know if its here its really IE 8
					version = 8; //reset? change if you need to
					// IE in Compat mode will mention Trident in the useragent
						ie8BrowserMode = "Compat Mode";
					// if it doesn't then its running in IE 7 mode
						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){
	if (IEMode.DocMode==7){

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



manicure   2017/5/4 上午 09:54:00

Its like you read my thoughts! You seem to understand a lot
approximately this, like you wrote the e-book in it or something.
I believe that you simply can do with a few
percent to power the message home a little bit, however
other than that, that is magnificent blog. An excellent read.
I will definitely be back.

manicure   2017/5/4 上午 07:18:00

Incredible! This blog looks exactly like my old one! It's on a completely different topic but it
has pretty much the same layout and design. Excellent choice of colors!

BHW   2017/4/16 上午 07:22:00

Way cool! Some extremely valid points! I appreciate you penning this post and the rest of the website is very good.

BHW   2017/4/15 上午 12:35:00

I'm amazed, I must say. Seldom do I come across a blog that's both equally educative and engaging, and let me tell you,
you have hit the nail on the head. The issue is something too few
people are speaking intelligently about. Now i'm very happy that I
found this in my search for something relating to this.

BHW   2017/4/13 下午 07:25:00

Nice blog here! Also your web site loads up fast! What web
host are you using? Can I get your affiliate link to your host?
I wish my website loaded up as fast as yours lol

BHW   2017/4/12 下午 05:49:00

It's enormous that you are getting ideas from this paragraph as well as from our discussion made at this place.

manicure   2017/4/6 上午 09:09:00

Hey would you mind stating which blog platform you're using?
I'm looking to start my own blog soon but I'm having a
tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your layout seems different
then most blogs and I'm looking for something completely unique.
P.S My apologies for getting off-topic but I had to ask!

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