天天看點

[轉]IE8相容模式大坑

公司标裝的WIN7都是IE8的,是以我目前的任務,就是讓頁面順利地在IE8下面展示。

可是大家都知道,微軟的東西非常水,規範很奇葩。

是以,我找了一篇解決IE8這種因為解析DOCTYPE異常而導緻浏覽器進入相容模式的文章。

原文:http://www.cnblogs.com/jerrold1108cn/articles/1587039.html 

前言

      為了幫助確定你的網頁在所有未來的IE版本都有一緻的外觀,IE8引入了檔案相容性。在IE6中引入一個增設的相容性模式,檔案相容性使你能夠在IE呈現你的網頁時選擇特定編譯模式。

      新的IE為了確定網頁在未來的版本中都有一支的外觀,IE8引入了檔案相容性。當你引入一個增設的相容性模式,此文章說明檔案相容性的必要性,列出現有版本IE能使用的檔案相容性模式并示範如何選擇特定的相容性模式。

了解檔案相容性的必要性

      每個主要版本IE新增的功能都是為了讓浏覽器更容易使用、增加安全性及更支援業界标準。以這些作為IE的特色,其中一個風險就是舊版本網站無法正确的顯示。

      為了将這個風險降到最低,IE6允許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"為預設,這會使頁面以舊版本浏覽器的視點顯示,"Standards mode"(也稱為"strict mode")特點是支援業界标準最為完善。然而要利用這個增強的支援功能,網頁必須包含恰當的<!DOCTYPE>指令。

      若一個網頁沒有包含<!DOCTYPE>指令,IE6會将它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但浏覽器無法辨識,IE6會将它以IE6 standards mode顯示。因為少數網站已經包含<!DOCTYPE>指令,相容性模式的切換相當成功。這使網頁開發人員能選擇将他們的網頁轉移為standards mode的最佳時機。

      随著時間經過,更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說,IE6不支援universal selector(即css之全局選擇器 * {}),一些網站便使用它來針對IE做特定的對應。

      當 IE7增加了對全域選擇器的支援,那些依賴IE6特點的網站便無法偵測出這個新版本的浏覽器。是以那些針對IE的特定對應無法應用于IE7,造成這些網站便無法如他們預期的顯示。由于<!DOCTYPE>隻支援兩種相容性模式,受到影響的網站擁有者被迫更新他們的網站使其能支援IE7。

      IE8 比之前的任何版本浏覽器都更支援業界标準,是以針對舊版本浏覽器設計的網頁可能無法如預期般呈現。為了幫助減輕所有問題,IE8引入檔案相容性的概念,使你能選擇你的網頁設計要對應的特定IE版本。檔案相容性在IE8增加了一些新的模式,這些模式能告訴浏覽器如何解析和編譯一個網頁。若你的網頁無法在 ie8正确的顯示,你可以更新你的網站使它支援最新的網頁标準(優先選項)或在你的頁面上新增一個meta元素用于告訴IE8如何依照舊版本浏覽器編譯你的頁面。

認識檔案相容性模式

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

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html> 
           
//documentMode功能會回傳一個數值對應目前頁面的檔案相容性模式,
//舉例來說,若網頁指定為支援IE8模式,documentMode便會回傳值"8"。

//在IE6引入的compatMode功能不支援在IE8引入的documentMode功能。目前使用
//compatMode建立的應用程式還能在IE8中作用,但它們必須更新為使用documentMode。

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
       engine = document.documentMode;
   else // IE 5-7
    {
       engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
       {
         if (document.compatMode == "CSS1Compat")
             engine = 7; // standards mode
       }
    }
   // the engine variable now contains the document compatibility mode.
}
           

使用浏覽器内容屬性值:

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a">   <!-- IE5 mode --> 

<!-- This header mimics Internet Explorer 7 and uses 
      <!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">


<!-- 如果一個特定版本的IE支援所要求的相容性模式多于一種,将採用列于标頭内容屬性中最高的可用模式。你可以使用這個特性來排除特定的相容性模式,雖然并不推薦這樣做。舉例來說,下列标頭即會排除IE7 mode。
-->
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
           

結論

相容性對于網頁設計師來說是非常重要的顧慮。雖然最好是可以建立一個完全不需依賴任何網頁浏覽器特性或功能的網站,有時候這是不可能實作的。檔案相容性模式便能将網頁限制在某個特定版本的IE中。

使用X-UA-Compatible标頭來指定你的頁面支援的IE版本。使用document.documentMode判定頁面的相容性模式。

選擇支援某個特定版本的IE,你可以確定你的頁面在未來的浏覽器版本中也能有顯示的一緻性。

繼續閱讀