偶遇的文檔兼容性

爲了幫助確保網頁在未來的 IE版本中具備一致的外觀,IE8 引入了文檔兼容性。 文檔兼容性是對 IE6中引入的兼容性模式的擴展,使咱們能夠選擇IE用於顯示網頁的特定呈現模式。javascript

meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />java

這是個是IE8的專用標記,用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式(好比IE6),以此來解決部分兼容問題,IE=edge這意味着,會強制瀏覽器按照最新的標準去渲染。就像在Google’s CDN使用最新版本的JQuery同樣,這是按照最新版本,但也可能因爲沒有固定的版本而破壞你的佈局。這樣寫能夠達到的效果是若是安裝了GCF,則使用GCF來渲染頁面,若是爲安裝GCF,則使用最高版本的IE內核進行渲染。web

例如模擬IE7的具體方式以下:chrome

< meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />瀏覽器

但令我好奇的是,此處這個標記後面居然出現了chrome這樣的值,難道IE也能夠模擬chrome了?服務器

迅速搜索了一下,才明白原來不是微軟加強了IE,而是谷歌作了個外掛:Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)。這個插件可讓用戶的IE瀏覽器外不變,但用戶在瀏覽網頁時,實際上使用的是Google Chrome瀏覽器內核,並且支持IE六、七、8等多個版本的IE瀏覽器,谷歌這個牆角挖的真給力!app

而上文提到的那個meta標記,則是在是安裝了GCF後,用來指定頁面使用chrome內核來渲染。框架

GCF下載地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/less

安裝完成後,若是你想對某個頁面使用GCF進行渲染,只須要在該頁面的地址前加上 gcf: 便可,例如: gcf:http://cooleep.com佈局

可是若是想要在開發時指定頁面默認首先使用GCF進行渲染,若是未安裝GCF再使用IE內核進行渲染,該如何進行呢?就是使用這個標記。

標記用法:

1.最基本的用法:在頁面的頭部加入

1< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >

用以聲明當前頁面用chrome內核來渲染。

複雜一些的就是本文一開始看到的那中用法:

1< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

這樣寫能夠達到的效果是若是安裝了GCF,則使用GCF來渲染頁面,若是爲安裝GCF,則使用最高版本的IE內核進行渲染。

2.經過修改HTTP頭文件的方法來實現讓指定的頁面使用GCF內核進行渲染:

在HTTP的頭文件中加入如下信息:X-UA-Compatible: chrome=1

在Apache服務器中,確保 mod_headers 和 mod_setenvif文件可用,而後在httpd.conf中加入如下配置信息:

< IfModule mod_setenvif.c>

< IfModule mod_headers.c>

BrowserMatch chromeframe gcf

Header append X-UA-Compatible "chrome=1" env=gcf

在IIS7或者更高版本的服務器中,只須要修改web.config文件,添加以下信息便可便可:

< configuration >

< system.webServer >

< httpProtocol >

< customHeaders >

< add name = "X-UA-Compatible" value = "chrome=1" />

</ customHeaders >

</ httpProtocol >

</ system.webServer >

</ configuration >

兼容性對於網頁設計師來講是很是重要的顧慮。雖然最好是能夠創建一個徹底不需依賴任何網頁瀏覽器特性或功能的網站,有時候這是不可能實現的。文件兼容性模式便能將網頁限制在某個特定版本的IE中。

使用X-UA-Compatible標頭來指定你的頁面支持的IE版本。使用document.documentMode斷定頁面的兼容性模式。

要斷定網頁使用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,你能夠確保你的頁面在將來的瀏覽器版本中也能有顯示的一致性。

相關文章
相關標籤/搜索