IE相容模式設定 X-UA-Compatible

X-UA-Compatible

來了解一下 X-UA-Compatible 是甚麼東西?
首先這個東西會出現在甚麼地方呢?
通常是網頁原始碼的開頭META就會看到(當然不一定都會有)，
範例如下

<head>
<title>這是測試網頁</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=5">
</head>Code language: HTML, XML (xml)

那這個 X-UA-Compatible 是幹嘛的呢?
X-UA-Compatible是 <meta> 的一個屬性，
它告訴IE要採用何種IE版本去渲染網頁。

為什麼要指定IE版本呢?
因為某些網頁的設計，無法適應較新版的瀏覽器，
所以使用X-UA-Compatible來強制IE採用低版本去渲染。

譬如使用下面這段程式碼後，
開發者無需考慮網頁程式碼在IE8上是否正常，
只要確保網頁在IE7下的表現正常就可以了。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> Code language: HTML, XML (xml)

文件模式

然後介紹一個東西叫做「文件模式」
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj676915(v=vs.85)?redirectedfrom=MSDN 

文件模式可以透過HTTP Header 與 HTML 或是IE開發者工具控制。
而 HTML 的部分又可以有兩個地方去做控制，
第一個是開頭的<!DOCTYPE>
第二個就是 Metadata 的 X-UA-Compatible

而IE的套用原則順序如下:

  • 若網頁同時有<!DOCTYPE>及X-UA-Compatible Header，以Header為準
  • 若瀏覽器支援X-UA-Compatible Header，但不支援Header指定的文件模式，將採用最高文件標準（IE=Edge）
  • 舊版瀏覽器如不支援X-UA-Compatible Header，由<!DOCTYPE>決定
  • IE9（含）以前會以IE5(Quirks) Mode顯示沒有標示<!DOCTYPE>的網頁，建議網頁一律都加<!DOCTYPE html>。

相關的設定寫法

強制IE瀏覽器呈現為特定的版本的標準。
它不支持IE7及以下：

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7"/>Code language: HTML, XML (xml)

如果用分號分開，它設置為不同版本的兼容級別，IE7、IE9。
它允許不同層次的向後兼容性：

<meta http-equiv="X-UA-Compatible" content="IE=7; IE-9"/>Code language: HTML, XML (xml)

只選擇其中一個選項：

<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=5">Code language: HTML, XML (xml)

允許更容易的測試和維護。雖然通常比較有用的版本，這是使用模擬：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">Code language: HTML, XML (xml)

什麼版本IE 就用什麼版本的標準模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">Code language: HTML, XML (xml)

使用以下代碼強制IE 使用Chrome Frame：

<meta http-equiv="X-UA-Compatible" content="chrome=1">Code language: HTML, XML (xml)

最佳的兼容模式方案，結合考慮以上兩種：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Code language: HTML, XML (xml)

定文件兼容性模式，在網頁中使用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>
    </body>
</html>Code language: HTML, XML (xml)

設定網站服務器以指定預設兼容性模式：

<?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>Code language: HTML, XML (xml)

參考文章：
https://www.wibibi.com/info.php?tid=416
https://injerry.pixnet.net/blog/post/57042465
https://blog.darkthread.net/blog/x-ua-compatible-setting/

Tags:

發佈留言