文件兼容性用於定義讓IE如何編譯你的網頁。此文件解釋文件兼容性,如何指定你網站的文件兼容性模式以及如何判斷一個網頁該使用的文件模式。javascript
前言css
爲了幫助確保你的網頁在全部將來的IE版本都有一致的外觀,IE8引入了文件兼容性。在IE6中引入一個增設的兼容性模式,文件兼容性使你可以在IE呈現你的網頁時選擇特定編譯模式。
新的IE爲了確保網頁在將來的版本中都有一支的外觀,IE8引入了文件兼容性。當你引入一個增設的兼容性模式,
此文章說明文件兼容性的必要性,列出現有版本IE能使用的文件兼容性模式並示範如何選擇特定的兼容性模式。html
認識文件兼容性模式java
IE8支持幾種文件兼容性模式,它們具備不一樣的特性並影響內容顯示的方式。css3
•Emulate IE8 mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standards mode指令會顯示成IE8 Standards mode而quirks mode會顯示成IE5 mode。不一樣於IE8 mode,Emulate IE8 mode重視<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standards mode指令會顯示成IE7 Standards mode而quirks mode會顯示成IE5 mode。不一樣於IE7 mode,Emulate IE7 mode重視<!DOCTYPE>指令。對於許多網頁來講這是最推薦的兼容性模式。
•IE5 mode 編譯內容如同IE7的quirks mode之顯示情況,和IE5中顯示的很是相似。
•IE7 mode編譯內容如同IE7的standards mode之顯示情況,不管網頁是否含有<!DOCTYPE>指令。
•IE8 mode提供對業界標準的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,並有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
•Edge mode指示IE以目前可用的最高模式顯示內容。當使用IE8時其等同於IE8 mode。若(假定)將來放出支持更高兼容性模式的IE,使用Edge mode的頁面會使用該版本能支持的最高模式來顯示內容。一樣的那些頁面在使用IE8瀏覽時仍會照常顯示。web
因爲edge mode使用該IE版本所能支持的最高模式來顯示所瀏覽的網頁內容,建議僅使用於測試頁及其餘非商用頁面。api
指定文件兼容性模式瀏覽器
要爲你的網頁指定文件模式,須要在你的網頁中使用meta元素放入X-UA-Compatible http-equiv 標頭。如下是指定爲Emulate IE7 mode 兼容性之範例。服務器
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html> app
其內容隨著指定的頁面模式而更改,當要模擬IE7時,指定IE=EmulateIE7,指定IE=5, IE=7, 或IE=8來選擇其中一種兼容性模式。你也能夠指定IE=edge來指示IE8使用它支持的最高模式。
X-UA-compatible標頭沒有大小寫之分。然而除了title元素及其餘的meta元素以外,它必須出如今網頁header節其它元素以前的位置,
設定網站服務器以指定預設兼容性模式
網站管理員可籍着爲網站定義一個自訂標頭來爲他們的網站預設一個特定的文件兼容性模式。這個特定的方法取決於你的網站服務器。舉例來講,下列的web.config文件使Microsoft Internet Information Services (IIS)能定義一個自訂標頭以自動使用IE7 mode來編譯全部網頁。
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
若你已於網站服務器指定了一個預設的文件兼容性模式,你能夠在個別頁面上指定不一樣的文件兼容性模式來蓋過它。在網頁中指定的模式優先權高於服務器中所指定的模式。
斷定文件兼容性模式
要斷定網頁使用IE8瀏覽時的文件兼容性模式,使用document object(文檔對象)的documentMode功能。例如在IE8的網址列輸入下列程式碼會顯示目前頁面的文件模式。
javascript:alert(document.documentMode);
documentMode功能會回傳一個數值對應目前頁面的文件兼容性模式,舉例來講,若網頁指定爲支持IE8模式,documentMode便會回傳值"8"。
在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode創建的應用程式還能在IE8中做用,但它們必須更新爲使用documentMode。
若你但願使用JavaScript斷定一個文件的兼容性模式,引入下面範例的這段程式碼可支持舊版本的IE。
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser. What mode is the engine in?
if (document.documentMode) // IE8
engine = document.documentMode;
else // IE 5-7
{
engine = 5; // Assume quirks mode unless proven otherwise
if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine = 7; // standards mode
}
}
// the engine variable now contains the document compatibility mode.
}
認識內容屬性值
內容屬性值在接收到異於先前敘述的數值時是具備彈性的。這能使你對於IE如何顯示你的網頁更有操控性。舉例來講,你能夠設定內容屬性值爲IE=7.5。當你這樣作的時候,IE嘗試將這個值轉換爲version vector並選擇最接近的結果。在這個例子中,IE會將其設定爲IE7 mode。下面的範例顯示該模式設定爲其餘值的情況。
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode -->
<!-- This header mimics Internet Explorer 7 and uses
<!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
注意: 前面的範例顯示單獨的內容值。實際上IE只會執行網頁中第一個X-UA-Compatible標頭。
你也可使用內容屬性來指定複數的文件兼容性模式,這能幫助確保你的網頁在將來的瀏覽器版本都能一致的顯示。欲設定複數的文件模式,請設定內容屬性以判別你想使用的模式。使用分號來分開各個模式。
若是一個特定版本的IE支持所要求的兼容性模式多於一種,將採用列於標頭內容屬性中最高的可用模式。你可使用這個特性來排除特定的兼容性模式,雖然並不推薦這樣作。舉例來講,下列標頭即會排除IE7 mode。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
結論
兼容性對於網頁設計師來講是很是重要的顧慮。雖然最好是能夠創建一個徹底不需依賴任何網頁瀏覽器特性或功能的網站,有時候這是不可能實現的。文件兼容性模式便能將網頁限制在某個特定版本的IE中。
使用X-UA-Compatible標頭來指定你的頁面支持的IE版本。使用document.documentMode斷定頁面的兼容性模式。
選擇支持某個特定版本的IE,你能夠確保你的頁面在將來的瀏覽器版本中也能有顯示的一致性。