IE兼容問題解決方案——指定文件兼容性爲content="IE=Edge,chrome=1"(可以解決很多的問題)

引言

偶爾做些坑爹的國企項目或者政府的web項目總是遇到一個坑爹的問題,就是要兼容IE,哪怕微軟自己都拋棄IE了那些國企政府機構的老機器還是跑IE,然後經過一番協調一般會指定一個版本至少兼容某個版本以上,然而一般我們都是希望能夠使用一些新特性,比如html5,最好是兼容谷歌,這樣就十分有利於我們開發者了

解決方案

利用文件兼容性定義讓IE如何去編譯你的網頁,如何指定你網站的文件兼容性模式以及如何判斷一個網頁該使用的文件模式,便是在meta信息中指定,以下是幾種指定方法:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代碼告訴IE瀏覽器,無論是否用DTD聲明文檔標準,IE8/9都會以IE7引擎來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代碼告訴IE瀏覽器,IE8/9都會以IE8引擎來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代碼告訴IE瀏覽器,IE8/9及以後的版本都會以最高版本IE來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代碼IE=edge告訴IE使用最新的引擎渲染網頁,chrome=1則可以激活Chrome Frame.

而讓IE能夠兼容谷歌的方法便是這句

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

解析

chrome=1 這個並不是IE模擬chrome,而是谷歌自己做的一個外掛:Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)。這個插件可以讓用戶的IE瀏覽器外不變,但用戶在瀏覽網頁時,實際上使用的是Google Chrome瀏覽器內核,而且支持IE6、7、8等多個版本的IE瀏覽器

要使用chrome=1,要安裝GCF,並且指定頁面使用chrome內核來渲染。


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

安裝完成後,如果你想對某個頁面使用GCF進行渲染,只需要在該頁面的地址前加上 gcf: 即可,例如: gcf:http://www.baidu.com


但是如果想要在開發時指定頁面默認首先使用GCF進行渲染,如果未安裝GCF再使用IE內核進行渲染,該如何進行呢?
就是使用這個標記。
但是如果想要在開發時指定頁面默認首先使用GCF進行渲染,如果未安裝GCF再使用IE內核進行渲染,
http-equiv=”X-UA-Compatible”這個是IE8的專用標記,是用來指定Internet Explorer 8 瀏覽器模擬某個特定版本IE瀏覽器的渲染方式,以此來解決IE瀏覽器的兼容問題。


例如指定IE8瀏覽器使用IE6的渲染方式呈現界面。
曾經css hacker常用的模擬IE7渲染方式的代碼:

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

IE=edge 這個就是另外一種解決方案了,這個需要IE版本比較高,因爲這個是意思是使用微軟的edge瀏覽器的內核去渲染界面了,而這個並不需要安裝特別的插件
官方對edge的定義:

  • 可使用開放式網絡技術(如 HTML5 canvas 標記)立即啓動,甚至包括 Internet Explorer 6、7 或 8 尚不支持的技術。
  • 利用 JavaScript 性能增強功能,使應用程序速度更快,響應更靈敏。
    所以這段代碼則可以解釋爲:如果安裝了GCF,則使用GCF來渲染頁面「”chrome=1”」,如果沒有安裝GCF,則使用最高版本的IE內核進行渲染「”IE=edge”」。

還有一個問題就是如何通過w3.org的html5驗證工具

http-equiv = "X-UA-Compatible"

在w3c的協議裏面沒有http-equiv = “X-UA-Compatible”這個值,所以在一部分界面可能通不過
這個的解決方案是在服務器端配置http equiv規則
以下是針對幾種主流服務器的配置方案

apache服務器,確保 mod_headers 和 mod_setenvif 是available的,然後在httpd.conf「新版Apache的配置文件是 apache2.conf」或者在.htaccess中加入以下規則:

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule >
</IfModule >

Windows Server在IIS7或者更高版本的服務器中,只需要修改web.config文件,添加如下信息即可:


<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name = "X-UA-Compatible" value = "chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

在Nginx服務器中,只需要找到 ginxconf ginx.conf並編輯,在server { }區域裏(最好是閉合符前面起一行)添加下列代碼即可:

add_header "X-UA-Compatible" "IE=Edge, chrome=1";
發佈了33 篇原創文章 · 獲贊 5 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章