相容IE8 代碼

來源:互聯網
上載者:User

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
其實就是把IE8當做IE7用

 

今天修改了關於前端測試的工具的文章《類比多瀏覽器安全色測試載入器-IETester》可以到http://tommyhu.cn/analog-multi-browser-compatibility-testing-tool-ietester_9305/訪問!文中推薦的是經典的IETester(提供IE5,IE6,IE7,IE8環境測試),IEcollection,Expression Web SuperPreview 測試版

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

未來相容性中的 中繼標籤和鎖定注意:本文檔是預備文檔,隨時可能變更。

對於 Web 開發人員來說,文本相容性是一個要考慮的重要問題。Windows Internet Explorer 8 引入了文本相容模式,該模式允許 Web 開發人員將瀏覽器設定為以與舊版本相同的方式顯示網頁,從而允許開發人員選擇更新時間。

本文檔將介紹由 Windows Internet Explorer 8 支援的文本相容模式,以及如何使用自訂標題基於每個頁面或每個網站實現這些模式。實現適當的相容模式後,可以確保網站與 Windows Internet Explorer 8 及更高版本相容。

各種相容模式
Windows Internet Explorer 8 支援多種相容模式,它們可啟用不同的受支援的功能,並影響內容的呈現方式。例如,

IE5 模式呈現內容時,像是使用了 Windows Internet Explorer 7 的 Quirks 模式,這與 Windows Internet Explorer 5 顯示內容的方式很相似。

IE7 模式呈現內容時,無論頁面是否包含 指令,都像是使用了 Windows Internet Explorer 7 的標準模式。

EmulateIE7 模式通知 Windows Internet Explorer 使用 指令確定如何呈現內容。標準模式指令以 Windows Internet Explorer 7 標準模式顯示,而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不同,EmulateIE7 模式遵循 指令。對於多數網站來說,它是首選的相容模式。

IE8 模式最大限度地支援行業標準(包括 W3C Cascading Style Sheets Level 2.1 Specification 和 W3C Selectors API,並能有限支援 W3C Cascading Style Sheets Level 3 Specification(工作草案)。

Edge 模式通知 Windows Internet Explorer 以最進階別的可用模式顯示內容,這實際上破壞了“鎖定”模式。對於 Windows Internet Explorer 8,這與 IE8 模式是等效的。如果(假定)Windows Internet Explorer 的未來版本支援更進階別的相容模式,設定為 Edge 模式的頁面將顯示在由該版本支援的最進階別模式中;但是,當使用 Windows Internet Explorer 8 查看時,這些相同的頁面仍將顯示在 IE8 模式中。由於在 Windows Internet Explorer 的未來版本中呈現頁面內容可能出現意外,建議 Web 開發人員將 Edge 模式僅用於測試頁面和其他非生產活動。

基於每個頁面指定相容模式
要為網頁指定文字模式,請使用 META 元素,以在該網頁中包含 X-UA-Compatible http-equiv 標題。以下樣本指定了 EmulateIE7 模式相容性。

HTML:<html>
     <head>
     <!-- Mimic Internet Explorer 7 -->
        <title>我的網頁</title>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
     </head>
     <body>
        <p>內容在此處。</p>
     </body>
</html>

Content 屬性指定了該頁面的模式;例如,要模仿 Windows Internet Explorer 7 的行為,請指定 IE=EmulateIE7。同樣,可指定 IE=5、IE=7 或 IE=8 以選擇其中一種相容模式。您還可以指定 IE=edge 以通知 Windows Internet Explorer 8 使用最進階別的可用模式。

X-UA-compatible 標題不區分大小寫;但是,它必須顯示在網頁中除 TITLE 和其他 META 元素以外的所有元素之前的標題(HEAD 部分)中。

基於每個網站指定相容模式
通過使用 Web 服務器為網站定義自訂 HTTP 響應標題,可為網站指定文字模式。HTTP 響應標題是 Web 服務器附加到為響應 HTTP 要求而發送到瀏覽器中的檔案的資訊,這些資訊通常包含發送迴文件的日期、大小和類型。

下列文檔介紹了將 Web 服務器配置為將自訂 HTTP 響應標題附加到所有網頁中所需的步驟。這將導致 Windows Internet Explorer 8 使用指定的文本相容模式,例如 EmulateIE7。

在 IIS 上實現 META 切換
在 Apache 上實現 META 切換
如果使用 Web 服務器指定了預設文本相容模式,則可通過在特定的網頁中指定其他文本相容模式來覆蓋該設定。在該網頁中指定的模式優先於由伺服器指定的模式。

使用指令碼確定文本相容模式
要使用 Windows Internet Explorer 8 確定網頁的文本相容模式,請使用 document 對象的 documentMode 屬性。例如,將以下內容鍵入到 Windows Internet Explorer 8 的地址欄中,可顯示當前網頁的文字模式。

javascript:alert(document.documentMode);

documentMode 屬性可返回與頁面的文本相容模式相對應的數值。例如,如果所選頁面支援 IE8 模式,則 documentMode 會返回 8。

注意:在 Windows Internet Explorer 6 中引入的 compatMode 屬性已不受支援,取而代之的是在 Windows Internet Explorer 8 中引入的 documentMode 屬性。當前使用 compatMode 的應用程式仍然可以在 Windows Internet Explorer 8 中運行;但是,它們已更新為使用 documentMode。

如果希望使用 JavaScript 確定文本的相容模式,請在其中包含支援 Windows Internet Explorer 舊版本的代碼,如以下樣本所示。

 

JScript:engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
     // 這是一個 IE 瀏覽器。引擎處於哪種模式下?
     if (document.documentMode) // IE8
        engine = document.documentMode;
     else // IE 5-7
     {
        engine = 5; // 假設為 quirks 模式;除非另外證實是其他模式
        if (document.compatMode)
        {
           if (document.compatMode == "CSS1Compat")
              engine = 7; // 標準模式
        }
     }
     // 引擎變數現在包含文本相容模式。
}

 

此處使用的文檔對象表示給定瀏覽器視窗中的 HTML 文檔,可用來檢查、修改 HTML 文檔或將內容添加到該文檔以及處理該文檔中的事件。

使用條件注釋確定文本相容模式
如果只需要適應 Windows Internet Explorer,以下程式碼範例說明了如何使用條件注釋來適用於目前的版本或舊版本。

HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
     <head>
        <title>測試頁</title>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
        <!--[if gte IE 8]>
        <style type="text/css">
        body {
         color:#0000ff;
         background-color:#000000;
        }
        </style>
        <![endif]-->
        <!--[if lt IE 8]>
        <style type="text/css">
        body {
         color:#000000;
         background-color:#ffffff;
        }
        </style>
        <![endif]-->
     </head>
     <body>
        <h1>
        <!--[if gte IE 8]>
        第 1 章。
        <![endif]-->
        第一章
        </h1>
        <h1>
        <!--[if gte IE 8]>
        第 2 章。
        <![endif]-->
        第二章
        </h1>
        將看到任何版本的文本。
     </body>
</html>

 

該文章出自《TOMMYHU's blog》,原文連結:http://tommyhu.cn/jian-rong-IE8-meta-X-UA-Compatible-IE-EmulateIE7/

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.