天天看點

IE對文檔的解析模式及相容性問題

深入研究這個問題源于最近制作的幾個頁面,交給前端後,發現在IE8下,對于JS動态控制的内容,頁面高度不能夠随着動态的調整。

仔細檢查後發現問題在于 display:inline-block 這個屬性。

inline-block 這個屬性确實幫我們解決了不少問題,但是IE8在動态内容的渲染支援上,還是會有奇怪的問題。

最後的解決方法是使用 x-ua-compatible ,來強制IE8使用IE7的模式來解析頁面。下面是整理的一些相關的資料。

IE的文檔模式

Document Compatibility 決定了IE如何渲染你的頁面,IE支援不同的 document (compatibility) mode。IE6之後的所有IE浏覽器都支援以下幾種模式:

Standards mode:就是每個浏覽器版本所提供的最新的功能,也是預設的模式;

Almost-standards mode:這個模式支援最新标準的API,但是界面渲染還是遵循舊版本的标準。

如果一個頁面包含了 <!DOCTYPE> 标簽,那麼IE浏覽器會按照标準模式進行解析。如果一個不包含 <!DOCTYPE> 的頁面,IE浏覽器使用 Quirks mode 來進行解析,這種情況下可能會有奇怪的事情發生。

大多數時候,我們都使用标準的模式來指定文檔模式。這樣能夠確定适應盡可能多的标準。

<!DOCTYPE html>

有些時候,我們需要指定一些高版本的浏覽器使用低版本的文檔模式解析頁面,這時我們可以使用  x-ua-compatible 頭标簽來實作。例如:

<html>

<head>

     <!-- Use Internet Explorer 9 Standards mode -->

     <meta http-equiv="x-ua-compatible" content="IE=9">

     <title>My Page</title>

</head>

<body>

     <p>Content goes here.</p>

</body>

</html>

上面這段代碼,在不同的浏覽器版本中,有不同的表現,如下表:

浏覽器版本

結果

描述

Windows Store app或Windows UI中的浏覽器

IE 10 标準模式

這是Windows Store app和Windows UI中唯一支援的模式

Internet Explorer for the Desktop 或者

Internet Explorer 9

IE9 标準模式

這正是x-ua-compatible指定的模式,而且浏覽器支援這種模式

Internet Explorer 8

IE8 标準模式

因為浏覽器不支援IE9标準模式,是以使用浏覽器支援的最高标準模式

Internet Explorer 7, Internet Explorer 6 或者

Internet Explorer 5.5 for mac

IE5 (Quirks)模式

這些浏覽器不支援這個标簽頭,并且網頁中也沒有指定<!DOCTYPE>

記住以下幾個規則:

如果頁面指定了DOCTYPE并且也使用了x-ua-compatible标簽,則x-ua-compatible标簽将覆寫DOCTYPE

如果浏覽器支援x-ua-compatible标簽,浏覽器會使用他所支援的最高模式顯示,則未必是标簽指定的版本

對于不支援x-ua-compatible标簽的老版本浏覽器,使用<!DOCTYPE>來決定文檔模式

IE9和之前版本的浏覽器,在遇到沒有指定<!DOCTYPE>的頁面時,使用IE5 Quirks模式解析文檔,是以建議所有文檔都要包含<!DOCTYPE>

注意:所有版本的浏覽器在解析 <!DOCTYPE html> 時,都會使用各自版本所支援的最高的标準模式來解析,是以推薦都是用HTML5的标記方式。IE9中,包含架構Frameset的頁面,子頁面的模式和父頁面一緻。但是在IE10中,可以分别指定。

用法:

x-ua-compatible 頭标簽大小寫不敏感,必須用在 head 中,必須在除 title 外的其他 meta 之前使用。

1、使用一行代碼來指定浏覽器使用特定的文檔模式。

<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" >

2、在一些情況下,我們需要限定浏覽器對文檔的解析到某一特定版本,或者将浏覽器限定到一些舊版本的表現中。可以用如下的方式:

<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" >

使用這種寫法,浏覽器或者使用标準模式進行解析,或者使用 IE5 Quirks 模式進行解析。

3、為了測試,我們也可以使用下面的語句指定浏覽器按照最高的标準模式解析頁面。

<meta http-equiv="x-ua-compatible" content="IE=edge" >

4、多個模式的指定。我們可以用逗号分割多個版本,這種情況下,浏覽器會從這個清單中選擇一個他所支援的最高版本來使用标準模式進行渲染。如下面的例子,在IE8進行浏覽時,将會使用IE7的标準模式進行渲染,因為他本身不支援IE9和IE10。

<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >

參考資料:

繼續閱讀