The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何從 Server-side 指定 IE8 瀏覽器應使用的瀏覽器模式

IE8 就快要正式推出了,在這個時刻,身為網頁開發者的你是否已經準備應戰了呢?IE 相容性問題一直以來都是網頁開發人員的痛,光是 IE6 + IE7 就不知道讓多少人痛苦萬分。不過還好,到了 IE8 至少還有個機會喘息一下。如果來不及準備,那就要好好看看這篇文章,至少不會讓你的網站那麼快陣亡。

雖然 IE8 提供「相容性檢視」功能 (如下圖),可以讓你以 IE7 預設的文件模式顯示網頁,不過在預設的情況下,IE8 還是會選擇「Internet Explorer 8 標準模式」進行網頁的顯示,由於還是有不少地方與 IE7 不相容,所以你的網頁還是有可能會亂掉。

IE8 提供「相容性檢視」功能

除了由使用者自行設定之外,事實上,IE8 還提供了另一種解決方案,讓網站管理員可以透過設定 HTTP Header 或 HTML META Tag 的方式,讓 IE8 自動選擇「相容性檢視」進行顯示網頁,如此一來你就不用害怕你的網站在 IE8 會亂掉的問題了。

第一種宣告方式:設定整個網站都以 IE7 相容模式顯示網頁 ( HTTP HEADER )

若以設定 IIS6 為例,你可以在 網際網路資訊服務 (IIS) 管理員 中,在站台中新增一個自訂的 HTTP 標頭名為 X-UA-Compatible,並且將值設定為 IE=EmulateIE7 即可完成全站設定。

你可以在 IIS 管理員中,在站台新增一個自訂的 HTTP 標頭名為 X-UA-Compatible,並且將值設定為 IE=EmulateIE7 即可完成全站設定。

如果是 IIS7 那就更簡單了,除了透過圖形化介面修改外,也可以直接修改網站根目錄下的 web.config 檔,並在 <httpProtocol> 區段內加入以下這行即可:

<httpProtocol> 

     <customHeaders> 
          <clear /> 
          <add name="X-UA-Compatible" value="IE=EmulateIE7" /> 
     </customHeaders> 

</httpProtocol>

至於 Apache Web Server 來講,你只要啟用 mod_headers 模組後,加底下這行到你的 VirtualHost 設定即可:

Header add X-UA-Compatible IE=EmulateIE7

只要這樣設定後,你的網站在 IE8 中檢視時,就會預設以模擬 IE7 文件模式的顯示方式運作了。

第二種宣告方式:設定特定網頁以 IE7 相容模式顯示網頁 ( Meta Tag )

這方式可以套用在「特定頁面」中,是以「頁面」為基礎的調整,你只要在 <head> 與 </head> 之間加入以下這行 Meta Tag 即可套用完成:

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

但有一點必須特別注意,這一行 Meta Tag 的宣告必須出現在 <head> ... </head> 之中,而且 <head> 一定要出現在 <body> 之前,才會正確套用 IE8 的「相容性檢視」功能,例如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
    <h1>TEST</h1>
</body>
</html>

---

以上二種宣告方式是以「頁面」為基礎的宣告方式優先權較高,所以比較安全的設定法,通常是設定 HTTP Header 為 IE=EmulateIE7,若頁面中有支援 IE8 的頁面,才設定成 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 讓 IE8 顯示該網頁時得以用 Internet Explorer 8 標準模式進行網頁顯示。

相關連結