關於IE9文件模式切換的簡單測試

和IE8一樣,IE9 Dev Tools提供了文件模式切換功能,協助開發人員測試網站在IE7/8/9下的呈現結果,共有兩組切換選項: Browser Mode(瀏覽器模式)及Document Mode(文件模式) [補充: IE Team Blog有篇詳細的介紹]。

簡單來說,切換瀏覽器模式會改變IE9送給Web Server的User Agent字串,網站程式常會依據瀏覽器送出的User Agent資訊來判別瀏覽器版本,針對不同瀏覽器傳回不用的特製網頁。換句話說,切換瀏覽器模式可以讓IE9偽裝自己是IE7或IE8(按下相容性檢視鈕亦有類似效果),模擬使用IE7/IE8檢視網站的結果;而文件模式,則可要求IE切換不同的顯示引擎產生HTML內容,以測試網站在不同IE版本的呈現效果。

聽起來有點模糊,所以我寫了一個測試範例來玩玩:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>IE9 Mode Test</title>
    <script type="text/javascript">
        function testScriptFeatures() {
            var r = [];
            r.push("IE9 Test->typeof document.body.style.opacity = "
                    + typeof document.body.style.opacity);
            r.push("IE8 Test->typeof window.JSON = "
                    + typeof window.JSON);
            r.push("IE7 Test->typeof document.body.style.maxWidth = "
                    + typeof document.body.style.maxWidth);
            document.getElementById("dvInfo").innerHTML = r.join("<br />");
        }
    </script>
    <style type="text/css">
        div  
        {
            font-size: 9pt; font-family: Verdana; 
            margin: 5px; padding: 5px; width: 400px; 
            border: 1px solid red;
            border-radius: 10px; /* IE9 */
        }
        div:first-child /* IE7+ */
        {
            background-color: yellow;
        }
        #dvInfo { background-color: #dddddd; }
        #spnUA:before /* IE8+ */
        {
            content: "****";
        }
    </style>
</head>
<body onload="testScriptFeatures()">
    <div><span id="spnUA">
        User Agent: <%=Request.UserAgent%>
    </span></div>
    <div id="dvInfo"></div>
    <div>Time: <%=DateTime.Now.ToString("HH:mm:ss")%></div>
</body>
</html>

在以上的HTML中,我加了一些只有IE9才看得到的效果(border-radius CSS、sytle.opacity)、一些IE8以上版本才看得到的效果(:before CSS, window.JSON)和一些IE7以上版本才看得到的效果(:first-child CSS, style.maxWidth),借著切換文件模式檢視不同的呈現結果: (最下方的DateTime.Now用來觀察IE9是否重新由網站讀取網頁,實驗結果每次切換瀏覽器模式或文件模式都會觸發重新整理)

  1. 先切到最原始的Quirks模式,在IE6下差不多看到的就是這樣子,但有一點差距: 在IE6,typeof document.body.style.maxWidth會傳回undefined,但IE9切Qurik模式下仍可使用這個IE7起才存在的屬性。依此而論,IE9/IE8在Quirks模式下DOM及Script引擎模擬的是"比IE7還原始的瀏覽器版本",並不等同於IE6。

  2. IE7標準模式,:first-child生效,第一個div出現黃底。

  3. IE8標準模式,:before生效,User Agent前方出現四個星,而window.JSON也存在了。

  4. IE9標準模式,圓角出現囉~ 而style.opacity透明度也能用了。
  5. 試著切換瀏覽器模式,我們可以看到User Agent的改變,這會影響網站判定的瀏覽器版本預設的文件模式(但如果網頁從頭到尾就只有一個版本,那就沒差),但瀏覽器模式與文件模式間並沒有綁死。例如: 即便瀏覽器模式為IE7,我們仍然可以將文件模式設為IE9秀出圓角來。

  6. 在文件模式中,會有一個選項被標為預設值,代表IE依據HTTP Header、<!doctype>、X-UA-Compatible meta所判別的文件模式。例如: 我們可以加入<meta http-equiv=”X-UA-Compatible” content=”IE=8” />,預設值就會變成IE8標準模式囉。

測試完畢!

歡迎推文分享:
Published 28 March 2011 08:00 AM 由 Jeffrey
Filed under: ,
Views: 25,372



意見

# KKBruce said on 27 March, 2011 08:29 PM

好像可以省下安裝IETest之類軟體的感覺。直接在IE9 Web Dev裡直接測試就好。

# jain said on 27 March, 2011 09:27 PM

可是要先裝IE9

# demo said on 27 March, 2011 10:44 PM

我個人覺得 IETest 還是必須要裝,雖然 IE9 可以模擬 7、8 但是有一些因為 js 撰寫問題只會在 IE 7 當的,用這種模擬方式就會活的好好的,因為他本身還是 IE9

# 小黑 said on 10 January, 2012 04:37 AM

又學到了一招

# 阿豪 said on 18 February, 2012 03:51 AM

不好意思 請問 一個網頁 要加入 指令馬 要怎麼加  還是 說 網頁紙令馬是固定的

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2011>
SunMonTueWedThuFriSat
272812345
6789101112
13141516171819
20212223242526
272829303112
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication