HTML Meta標籤詳解

HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什麼做用？
主題 HTML

X-UA-Compatible是自從IE8新加的一個設置，對於IE8如下的瀏覽器是不識別的。 經過在meta中設置X-UA-Compatible的值，能夠指定網頁的兼容性模式設置。

在網頁中指定的模式優先權高於服務器中(經過HTTP Header)所指定的模式。 兼容性模式設置優先級：

meta tag > http header

meta tag > http header

經常使用的例子：

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

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

Google Chrome Frame 百科

「IE=Edge,chrome=1″這樣簡單快捷，可是弊端是代碼將沒法經過W3C驗證。其實這並非問題，畢竟標準只是標準，若是隻有這一個「錯誤」徹底不會有任何不良的影響。

IE文檔兼容性模式全部可能的值：

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瀏覽時仍會照常顯示。

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瀏覽時仍會照常顯示。

注意事項：

1，根據官網定義X-UA-compatible 標頭不區分大小寫；不過，它必須顯示在網頁中除 title 元素和其餘 meta 元素之外的全部其餘元素以前。若是不是的話，它不起做用

2，content的內容是IE=8，或者IE=edge等值，注意不是IE8或者直接寫個edge的值，不然不起做用

若是對WEb服務器瞭解，能夠直接配置一下VirtualHost: Apache:

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

< IfModule mod_setenvif .c >

< IfModule mod_headers .c >

BrowserMatch MSIE ie

Header set X - UA - Compatible "IE=Edge" env = ie

BrowserMatch chromeframe gcf

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

< / IfModule >

< / IfModule >

Nginx: 詳細參考： 例子

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

add _ header "X-UA-Compatible" "IE=Edge,chrome=1" ;

參考：

http://lightcss.com/add-x-ua-compatible-meta-to-your-website/

http://desert3.iteye.com/blog/1638591