以下為本站文章分類清單

  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.....呃.....

以下為文章回應區

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

hotelsissy.gr   2017/11/19 下午 04:06:00

Hi! I'm at work browsing your blog from my new iphone 3gs!
Just wanted to say I love reading your blog and look forward
to all your posts! Keep up the great work!

home security camera reviews   2017/11/16 下午 05:01:00

To cover your home from injury?

Itamar Serpa Fernandes   2017/11/13 下午 01:38:00

I’m not that much of a internet reader to be honest but
your sites really nice, keep it up! I'll go ahead and bookmark
your site to come back later on. Many thanks

reverse phone lookup   2017/11/13 上午 11:13:00

It's an remarkable post for all the online
people; they will take benefit from it I am sure.

reverse phone lookup   2017/11/10 下午 04:07:00

I will immediately snatch your rss feed as
I can not to find your email subscription link or e-newsletter
service. Do you've any? Kindly permit me recognize so that I may subscribe.
Thanks.

Lelio Vieira Carneiro Junior   2017/11/10 下午 12:02:00

Great post. I was checking constantly this weblog and I'm impressed!
Extremely useful information particularly the closing part :) I deal with such info a lot.
I used to be looking for this certain information for a long time.
Thanks and good luck.

How long does Achilles tendonitis last for?   2017/8/21 下午 05:11:00

We're a group of volunteers and starting a new scheme in our community.
Your website offered us with valuable info to work on. You have done an impressive job
and our whole community will be grateful to you.

How do you get Achilles tendonitis?   2017/8/21 下午 04:41:00

Hi there just wanted to give you a quick heads up.
The words in your post seem to be running off the screen in Chrome.
I'm not sure if this is a formatting issue or something to do with browser compatibility but I figured I'd post
to let you know. The layout look great though!
Hope you get the problem resolved soon. Kudos

Do you get taller when you stretch?   2017/8/21 下午 02:09:00

Wow, this article is good, my sister is analyzing these things, therefore I am going to tell her.

leticia6sykes0.unblog.fr   2017/8/12 下午 04:40:00

I feel this is one of the most vital information for me.
And i am happy reading your article. But should remark on some common issues, The web site taste
is perfect, the articles is in point of fact
nice : D. Excellent task, cheers

How do you get taller?   2017/8/4 上午 10:51:00

Hey there this is somewhat of off topic but I
was wondering if blogs use WYSIWYG editors
or if you have to manually code with HTML. I'm starting a blog soon but have no coding knowledge so I
wanted to get guidance from someone with experience.
Any help would be greatly appreciated!

Why is my Achilles tendon burning?   2017/8/4 上午 10:50:00

Hi! Someone in my Facebook group shared this site with us so I came to
check it out. I'm definitely enjoying the information. I'm book-marking and will
be tweeting this to my followers! Excellent blog and wonderful style and design.

How much does it cost to lengthen your legs?   2017/7/31 上午 11:48:00

We're a gaggle of volunteers and opening a brand new scheme in our community.

Your web site offered us with helpful info to work on. You have done
an impressive activity and our entire neighborhood can be grateful to
you.

lee2shannon6.snack.ws   2017/7/31 上午 03:36:00

Hello There. I found your blog using msn. This is a really well
written article. I'll be sure to bookmark it and come back
to read more of your useful info. Thanks for the post.
I'll certainly comeback.

What is the Ilizarov method?   2017/7/28 上午 11:18:00

I was curious if you ever considered changing the layout
of your blog? Its very well written; I love what youve got to say.
But maybe you could a little more in the way of content so people could
connect with it better. Youve got an awful lot of text for
only having 1 or two pictures. Maybe you could space it out
better?

robertquintania.blog.fc2.com   2017/7/23 上午 09:19:00

Write more, thats all I have to say. Literally, it seems as
though you relied on the video to make your point.
You clearly know what youre talking about, why waste your
intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?

vitamin c foot pain   2017/7/3 上午 09:40:00

Since the admin of this web page is working, no question very quickly it will
be well-known, due to its quality contents.

vitamin d overdose foot pain   2017/7/3 上午 09:30:00

Thanks for finally writing about >【卜維丰】IE8 相容性檢視 Compatibility
View <Liked it!

foot pain in the arch   2017/7/2 下午 01:04:00

Precisely what I was looking for, thanks for posting.

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!

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