DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> IE8兼容視圖(IE7 mode)與獨立IE7的區別詳解
IE8兼容視圖(IE7 mode)與獨立IE7的區別詳解
編輯:前端技巧     

一. IE8兼容視圖概述
為了解決新版浏覽器不兼容舊網站的問題,IE8浏覽器增加了一種叫做“兼容性視圖”的功能,可以讓網頁以IE7的代碼規范來顯示,這樣,就能夠很好的解決大部分(但不是全部)由於代碼標准不一致引起的網頁問題。
二.“浏覽器模式”和“文檔模式”之間的區別
兼容性視圖涉及兩個重要的功能便是“浏覽器模式browser mode”和“文檔模式document mode”,在IE8中按F12鍵,打開“開發人員工具”,在菜單欄中可以看到“浏覽器模式”和“文檔模式”的切換菜單,其中可以選擇切換到IE7/8等不同的網頁模式。
那“浏覽器模式”和“文檔模式”之間有什麼區別呢?
“浏覽器模式”用於切換IE針對該網頁的默認文檔模式、對不同版本浏覽器的條件備注解析、發送給網站服務器的用戶代理(User-Agent)字符串的值。網站可以根據浏覽器返回的不同用戶代理字符串判斷浏覽器的版本和安裝的功能,這樣就可以向不同的浏覽器返回不同的頁面內容。
默認情況下,IE8的浏覽器模式為IE8。用戶可以通過單擊地址欄旁邊的兼容性視圖按鈕來手動切換到不同的浏覽器模式。在IE8中,IE8兼容性視圖會以IE7文檔模式來顯示網頁,同時會向服務器發送IE7的用戶代理字符串。
“文檔模式”用於指定IE的頁面排版引擎(Trident)以哪個版本的方式來解析並渲染網頁代碼。切換文檔模式會導致網頁被刷新,但不會更改用戶代理字符串中的版本號,也不會從服務器重新下載網頁。切換浏覽器模式的同時,浏覽器也會自動切換到相應的文檔模式。
一般來說,兩者都要設置為同樣的版本,但是,如果不同又如何呢?或者說兩者是否有優先級區別呢?
請看下面的msdn帖子:Just The Facts: Recap of Compatibility View
http://blogs.msdn.com/b/ie/archive/2009/02/16/just-the-facts-recap-of-compatibility-view.aspx
精華摘抄:
•We’ve evangelized use of the X-UA-Compatible tag to websites unable to update to support IE8’s Standards mode. The tag allows a web author to declare the exact standards mode behavior for which their website works best – IE8 Standards (again, the default when no header is present) or IE7 Standards. For example, using the value ‘IE=EmulateIE7’ causes IE8 to display a website “as IE7 would have”.
•We’ve provided end-user and corporate / IT mitigations to the website compatibility problem under the umbrella term ‘Compatibility View’. ‘Compatibility View’ allows IE8 users to have a great experience even when visiting websites that haven’t yet performed either of the above two steps. It also helps IT organizations preserve compatibility with the large number of line-of-business websites that are Internet Explorer 7 capable today.
•Compatibility View and the X-UA-Compatible tag are not equivalent. Compatibility View is something you do on the client. It affects three things: the User Agent string, the Version Vector (used in evaluation of conditional comments), and what mode DOCTYPEs that trigger Standards map to – IE8 Standards or IE7 Standards. The X-UA-Compatible <META> tag / header is something you use in page content / server-side and, when present, completely overrides Compatibility View settings on the client. It affects two things: the Version Vector and what mode DOCTYPEs that trigger Standards map to. It can’t affect the UA string as it’s already too late to change that – the client’s already made the GET request to the server (and it contains a UA string). What this means to developers is that if your site pivots on the User Agent string, adding just the X-UA-Compatible tag (to cause IE8 to display your site in IE7 Standards mode) won’t make your website compatible – you’ll also need to update your User Agent string detection logic as well.
總結,有兩種方式可以使IE8兼容IE7模式,一是在服務器端,通過程序員控制修改網頁的文檔模式document mode,也就是通過Meta(X-UA-Compatible IE=EmulateIE7), 強制使頁面變為兼容IE7的頁面。
如下:

復制代碼代碼如下:
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>cest</title>
</head>

如果不寫這句,就會默認使用IE8了。
另一個就是在客戶端,當網站還沒來得及修改Meta時,用戶如果裝了IE8,發現無法正常顯示,這時最後一招就是點擊Compatibility View按鈕了,它最終體現在User Agent上,也就是說點了兼容性視圖按鈕,再提交的Http請求頭就被改寫為 MSIE7.0,使客戶端偽裝成IE7來發送請求。
如下:
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
按照該MSDN的說法,修改Meta(X-UA-Compatible IE=EmulateIE7)的優先級要高於點擊Compatibility View,它可以覆蓋掉Compatibility View的選擇, 也就是說,一旦網站改版完成發布後,只要設置了Meta , 就可以使原來用戶浏覽器上設置的Compatibility View作廢,從而自動適應新版本的IE8浏覽器。
三.IE8兼容視圖(IE7 mode)與獨立IE7不完全相同
請看Technet.Microsoft的帖子:
What Is Compatibility View?
http://technet.microsoft.com/zh-cn/ff966533
Compatibility View is a feature of Windows Internet Explorer 8 that enables the browser to render a webpage nearly identically to the way that Windows Internet Explorer 7 would render it.
In Internet Explorer 8, Compatibility View changes how the browser interprets code that is written in CSS, HTML, and the Document Object Model (DOM) to try to match Internet Explorer 7. A site that a user views in Internet Explorer 8 Compatibility View is almost identical to a site that the user views in Internet Explorer 7. However, Compatibility View does not change how the browser interprets all code. For example, the changes in Internet Explorer 8 for how the browser handles ActiveX, the parser, AJAX, JavaScript, networking, and security might still cause compatibility issues. Compatibility View does not change these behaviors.
In an enterprise environment, some areas have lower risk for compatibility issues. For example, Intranet Zone websites use Compatibility View by default. Client web applications that render by using the Web Browser Control, or the WebOC (Internet Explorer rendering engine), also have a low risk for compatibility issues because Internet Explorer 8 defaults to a compatibility mode for the WebOC. However, the default configuration settings for Compatibility View might not ensure complete compatibility. To determine if a website or web application is compatible with Internet Explorer 8, you should test the website or web application.
For more information about the differences between Internet Explorer 8 Compatibility View and Internet Explorer 7, see the Site Compatibility and Internet Explorer 8 blog. For a list of what to check when you upgrade to Internet Explorer 8, see the Internet Explorer 8 Readiness Toolkit.
For more information about Compatibility View, see the Internet Explorer Team Blog.
請看MSDN的帖子:
1. Differences between IE8 Compatibility View and IE7
http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
摘抄:
We strive to make Compatibility View behave as much like IE7 as possible, but we do make exceptions. Many of these exceptions enable improved security and accessibility features immediately, even for sites that have not yet migrated to IE8 Standards Mode.
2. What EXACTLY does Compatibility View do in IE8?
http://webmasters.stackexchange.com/questions/2219/what-exactly-does-compatibility-view-do-in-ie8
精華摘抄:
Compatibility View renders the page as if it was Internet Explorer 7 (including Javascript). There are a few differences between IE8 with CV and pure IE7 but essentially it is the same. If you really want the detail of what is going on then read Just The Facts: Recap of Compatibility View from the IE MSDN blog.
You can also force IE8 to use CV with this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
If you are having problems, I'd suggest first checking you have a legitimate doctype in your HTML (the simplest one is <!DOCTYPE html> which forces standards mode). That will solve 90% of your problems, especially with IE6.
結論是:IE8兼容模式與獨立的IE7是不同的,還是有些差異的,它並不是在IE8裡簡單包含了一個完整的IE7。
四.具體差異的細節
1. Cross Document Communication
Hacks enabling cross-domain, cross-document communication have been disabled for security reasons.
解決方案:Use Cross Document Messaging (XDM) to work around this change.
2. Extending the Event Object
IE exposes new properties for certain AJAX features such as Cross Document Messaging (XDM), even in Compatibility View. Adding custom properties to the Event object can conflict with these new properties, such as "source".
event.source = myObject; // Read-only in IE8
解決方案: Change the names of conflicting custom properties to avoid collision.
event.mySource = myObject;
3. Attribute Ordering
The ordering of attributes has changed, affecting the attributes collection as well as the values of innerHTML and outerHTML. Pages depending on a specific attribute ordering may break.
attr = elm.attributes[1]; // May differ in IE8
解決方案: Reference attributes by name as opposed to their position within the attributes collection.
attr = elm.attributes["id"];
4. Setting Unsupported CSS Values
Assigning CSS values that were unsupported in IE7 but are supported in IE8 Standards Mode will not generate exceptions in IE8 Compatibility View. Some sites use these exceptions to determine if a particular value for a CSS property is supported or not.

復制代碼代碼如下:
Try
{
elm.style.display = "table-cell";
} catch(e)
{
// This executes in IE7,
// but not IE8, regardless of mode
}

解決方案: Short of version detection, this is a difficult issue to work around. If this behavior is essential to a page, updating the page to run in IE8 Standards Mode may be the best approach.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved