深入研究這個問題源於最近制作的幾個頁面,交給前端后,發現在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:就是每個瀏覽器版本所提供的最新的功能,也是默認的模式;
Quirks 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" >
參考資料:
1、
ie8 bugs
7、
IE9提供四種兼容模式