瀏覽器模式與文檔模式區別

瀏覽器模式下的影響：

簡單來說，“瀏覽器模式”影響的是瀏覽器的版本及IE的條件注釋，

”瀏覽器模式”會影響伺服器端對瀏覽器版本的判斷,主要表現在展現，對CSS影響很大

先看看以下的代碼：

<!–[if IE 7]>
<style type=”text/css”>
.content{color:#F00;}
</style>
<![endif]–>
<div class=”content”>”瀏覽器模式”為IE7的情況下，字型顏色為紅色，其他情況為黑色。</div>

這是一段非常簡單的IE條件注釋代碼，在IE7下字型的顏色會被解析為紅色，此時我們切換瀏覽器模式並保持文檔模式不變，效果

可見，切換”瀏覽器模式”，對IE的條件注釋會有影響。

另外，”瀏覽器模式”對伺服器端獲得瀏覽器版本好也會有影響，看下面的代碼：

<script type=”text/javascript”>
alert(navigator.appVersion);
</script>

 

這是非常簡單的一段JS代碼，作用是輸出瀏覽器的版本資訊，用於檢測瀏覽器的版本，在不同瀏覽器模式下效果

可見，不同的瀏覽器模式導致了JS中appVersion的值的不同，即瀏覽器的版本資訊發生了變化。

“瀏覽器模式”中還有另外一個模式——相容性檢視，在測試中發現，當把瀏覽器模式切換為改模式後，IE7注釋可觸發，JS顯示的版本號碼也為IE7，有興趣的同學可以自行測試，此處不再累述。

瀏覽器模式下的影響：

”文檔模式”影響的是IE的排版引擎，對DOM的渲染會產生影響，下面通過例子來看看到底有哪些影響，首先還是看代碼：

<style type=”text/css”>
.content{#color:#F00;}
</style>
<div class=”content”>文檔模式為IE7的情況下，字型顏色為紅色，其他情況為黑色。</div>

這裡用到了HACK，在IE6、7下，文字的字型應為紅色，其他瀏覽器為預設的黑色字，保持瀏覽器模式不變的情況下，切換文檔模式，效果

可見，“文檔模式”對CSS hack產生了影響，也就是說，“文檔模式”的切換會直接影響到頁面的渲染，即之前所說的Trident引擎，這也就是為什麼IE的Quirks模式是在 “文檔模式”中切換而非在“瀏覽器模式”中切換的原因（Quirks模式中的盒模型的解析與標準不同）。
再來看看以下的一段代碼：

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

周所周知，這段代碼的作用是令IE8+的瀏覽器以IE7的模式來渲染頁面，以期達到向前相容的目的，當我們在頁面中加入這段代碼後，瀏覽網頁，出現的效果（IE9瀏覽器）：

瀏覽器的預設文件模式被設定為IE7或IE8，渲染模式也以IE7或IE8的模式進行渲染，也就是說，在頁面中插入

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >

這段聲明會直接影響到文檔模式，當然，此處使用者可手動切換文檔模式，這麼做可以讓一些不相容新版IE的頁面在加入此段聲明後能夠更好地在新版IE 瀏覽器中被瀏覽。

 

文章引用地址：http://www.iefans.net/ie-liulanqi-wendang-moshi-xuanran-ceshi/ 作者：iefans