【HTML&CSS】 第二章：標準模式下的頁面與怪異模式下的頁面區別

盒模型

前面提到，盒模型（box mode）是瀏覽器 Quirks Mode 和 Standards Mode 的主要區別。

描述

對於「盒模型」一詞並無明確的文檔定義，它是開發人員描述 CSS 中塊級元素的一種約定俗稱。

具體而言，針對一個塊級元素，如<p>、<div>、<span>等，CSS 的規範定義了一個寬度和高度，以及 3 個級別的環繞它的框 padding、border 和 margin 。這些屬性咱們能夠把它轉移到咱們平常生活中的盒子上來理解，因此將這種模型稱爲盒模式。對於盒模型，針對高度和寬度的定義，不一樣瀏覽器的解釋不一樣。

出於歷史緣由，早期的 IE 瀏覽器（IE 6 之前）將盒子的 padding 和 border 算到了盒子的尺寸中，這一模型被稱爲 IE 盒模型。該模型如圖 2.1 所示，

圖 2 IE 盒模型

在 IE 盒模型中，

box width = content width + padding left + padding right + border left + border right，

box height = content height + padding top + padding bottom + border top + border bottom，

而在 W3C 標準的盒模型中，box 的大小就是 content 的大小，如圖 3 所示，

圖 3 W3C 標準盒模型

box width = content width，

box height = content height，

這一區別將致使頁面繪製時全部的塊級元素都出現很大的差異，因此兩種不一樣的文檔模式下的頁面也區別很大。

示例展現

以下代碼段所示，咱們定義一個簡單的 DIV 元素，設定其寬度和高度分別爲 500px，定義 border 爲 50px，紅色。

清單 1

div.a{
	width:500px;
	height:500px;
	border:50px;
	border-style:solid;
	border-color:red;
}

分別在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下運行，結果如圖 4 和 5 所示。明顯能夠看到，在 Standards Mode 下的 DIV 要大於 Quirks Mode，其實際渲染大小爲 600px*600px。

圖 4 IE 5 Quirks Mode

圖 5 IE 8 Standards Mode

圖片元素的垂直對齊方式

CSS 中 vertical-align 屬性用於設置或檢索對象內容垂直對齊方式，該屬性定義行內元素的 base line 相對於該元素所在行的 base line 的垂直對齊。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。其取值能夠爲 baseline，sub，supper，top，text-top，bottom，text-bottom，middle 等。什麼是 baseline 和 bottom，它們有何區別？下面咱們經過一副圖來進行解釋。

描述

CSS 爲了肯定文字行的位置，定義以下概念描述，base line，bottom line，top line， middle line。其中，base line 指的是一行字橫排時下沿的基礎線，baseline 並非漢字的下端沿，而是英文字母 e 的下端沿，bottom line，指的是漢字，或者英文字母 p，g 的下端沿。以下圖 6 所示。

圖 6 base line 概念

對於 inline 元素和 table-cell 元素，在 IE Standards Mode 下 vertical-align 屬性默認取值爲 baseline。而當 inline 元素的內容只有圖片時，如 table 的單元格 table-cell。在 IE Quirks Mode 下，table 單元格中的圖片的 vertical align 屬性默認爲 bottom，所以，在圖片底部會有幾像素的空間。

示例展現

以下代碼段所示，咱們定義一行兩列的 table，table 單元格設定爲寬度和高度均爲 200px 的 img 圖片，爲了突出顯示區別，分別定義單元格與圖片的邊框顏色爲藍色和橘色。

清單 2

td.a
{
	border-style:solid;
	border-color:blue;
}

img.c
{
	width:200px;
	height:200px;
	border-style:solid;
	border-color:orange;
}

分別在 IE 10 Quirks Mode 和 IE 8 Standards Mode 下運行，結果如圖 7 和 8 所示。在 Quirks Mode 下，table 單元格中的圖片與單元格底部對齊，而在 Standards Mode 下，圖片與單元格之間多了 3 個像素的空間。

圖 7 IE 10 Quirks Mode

圖 8 IE 8 Standards Mode

<table>元素中的字體

CSS 中，描述 font 的屬性有 font-family，font-size，font-style，font-weight，分別表示了 font 的族系、大小、風格以及粗細。

描述

在 CSS 標準中，上述屬性都是能夠繼承的。而在 IE Quirks Mode 下，對於 table 元素，字體的某些屬性將不會從 body 或其餘封閉元素繼承到 table 中，特別是 font-size 屬性。

示例展現

以下代碼段所示，咱們定義 body 的 font 屬性爲斜體、紅色、加粗、fantasy 字體，對於 table 元素，未定義其 font 屬性。

清單 3

body
{
	font-style:italic;
	color:red;
	font-size:200%;
   font-weight:bold;
	font-family: fantasy;
}

分別 IE 5 Quirks Mode 和 IE 8 Standards Mode 下運行，結果如圖 9 和 10 所示。在 Quirks Mode 下，table 單元格中字體的 font-size，font-style，font-weight 屬性不會繼承 body，只有 family 屬性會被繼承。而在 Standards Mode 下，全部屬性都被繼承。

圖 9 IE 5 Quirks Mode

圖 10 IE 8 Standards Mode

內聯元素的尺寸

CSS 中常見的元素有兩類，分別是 block（塊級）元素及 inline（內聯）元素。這兩類元素的主要區別在於 block 元素一般做爲獨立的一塊繼續顯示，先後都有換行，而 inline 元素則不會產生換行。根據 CSS 標準，對於 inline 元素，又能夠分爲 replaced 和 non-replaced 兩類。

描述

什麼是 non-replaced inline 元素？首先，咱們解釋下 non-replaced 元素，對於 HTML 中定義的元素，默認具備 CSS 格式化外表範圍的元素，好比 img 元素，有本身的寬和高，咱們稱其爲 replaced 元素，其餘例 input，textarea，select，object，等都是 replaced 元素。除了這些元素以外的元素就是 non-replaced 元素。所以，具備 non-replaced 屬性的 inline 元素即爲 non-replaced inline 元素，如 span 元素。

在 IE Standards Mode 下，non-replaced inline 元素沒法自定義大小，而在 IE Quirks Mode 下，定義這些元素的 width 和 height 屬性，可以影響該元素顯示的大小尺寸。

示例展現

以下代碼段所示，爲了突出顯示，咱們定義一個背景色爲橘色的 div 中嵌套一個 span 元素，該 span 元素的高和寬均爲 200px，背景色爲藍色。

清單 4

div.a
{
	width:300px;
	height:300px;
	background-color:orange;
}

span.b
{
	height:200px;
	width:200px;
	background-color:blue;
}

分別在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下運行，結果如圖 11 和 12 所示。在 Quirks Mode 下，span 元素可以正常顯示，左圖中 200*200 的藍色的區塊。而在 Standards Mode 下，span 尺寸爲零。

圖 11 IE 5 Quirks Mode

圖 12 IE 8 Standards Mode

元素的百分比高度

CSS 中對於元素的百分比高度規定以下，百分比爲元素包含塊的高度，不可爲負值。若是包含塊的高度沒有顯式給出，該值等同於「auto」（即取決於內容的高度）。因此百分比的高度必須在父元素有聲明高度時使用。

描述

當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決於內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。

示例展現

以下代碼所示，爲了突出顯示，咱們定義一個背景爲粉色的 table，在 table 的單元格中嵌入一個背景爲橘色的 div b，將該 div 的高度設置爲 90%。定義 b 的子節點 c 爲高度和寬度均爲 200px 的 div 元素，背景爲藍色。

清單 5

table.a
{
	height:500px;
	background-color:pink;
}
div.b
{
	background-color:orange;
	width:300px;
	height:90%;
	display:block;
}
div.c
{
	width:200px;
	height:200px;
	background-color:blue;
}

分別在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下運行，結果如圖 13 和 14 所示。在 Quirks Mode 下，div b 的高度爲 talle 單元格的 90%，而在 Standards Mode 下，div b 的高度由其子節點 c 決定，爲 200px。

圖 13 IE 5 Quirks Mode

圖 14 IE 8 Standards Mode

元素溢出的處理

CSS 中 overflow 屬性定義了一個元素的內容不適合指定的尺寸時，溢出元素內容的處理方式。默認值爲 visible，即顯示溢出。

描述

在 IE Standard Mode 下，overflow 取默認值 visible，即溢出可見，這種狀況下，溢出內容不會被裁剪，呈如今元素框外。而在 Quirks Mode 下，該溢出被當作擴展 box 來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。

示例展現

以下代碼段所示，咱們定義一個背景爲藍色的 div a，在 a 中嵌入一個背景爲橘色的 div b，設置 b 的高度 400px 大於 a 的高度 300px，使 a 發生溢出。

清單 6

div.a
{
	width:300px;
	height:300px;
	background-color:blue;
}

div.b
{
	width:200px;
	height:400px;	
	background-color:orange;
}

分別在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下運行，結果如圖 15 和 16 所示。在 Quirks Mode 下，div a 的高度爲又 300px 變爲 400px，以適應 b 的大小，而在 Standards Mode 下，div a 的大小保持不變，溢出部分保留。

圖 15 IE 5 Quirks Mode

圖 16 IE 8 Standards Mode

 

X-UA-Compatible是針對ie8新加的一個設置，對於ie8以外的瀏覽器是不識別的，這個區別與content="IE=7"在不管頁面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的標準模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。對於多數網站來講，它是首選的兼容性模式。

目前IE8尚在測試版中，因此爲了不製做出的頁面在IE8下面出現錯誤，建議直接將IE8使用IE7進行渲染。也就是直接在頁面的header的meta標籤中加入以下代碼：

 

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

 

這樣咱們才能使得頁面在IE8裏面表現正常！

瀏覽器市場份額的激烈競爭，給網頁設計開發人員帶來了兼容性設計的麻煩。單單 IE 瀏覽器就有好幾個主流版本，IE六、IE七、IE8 等等。固然使用諸如 IETester，多版本 IE 共存解決方案之類的第三方集成工具，能夠方便代碼調試。但咱們總須要找尋一種更爲省時省力的方法。

X-UA-Compatible 是針對 IE8 版本的一個特殊文件頭標記，用於爲 IE8 指定不一樣的頁面渲染模式。因爲當下 IE6 和 IE7 使用率依然較高，綜合考慮，啓用 IE8 版本的 X-UA-Compatible 兼容模式顯得至關重要。

各類兼容模式代碼示例以下：

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

 

像是使用了 Windows Internet Explorer 7 的 Quirks 模式，這與 Windows Internet Explorer 5 顯示內容的方式很類似。

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

 

不管頁面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的標準渲染模式。

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

 

開啓 IE8 的標準渲染模式，但因爲自己 X-UA-Compatible 文件頭僅支持 IE8 以上版本，所以等同於冗餘代碼。

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

 

Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內容，這實際上破壞了「鎖定」模式。

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

 

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令肯定如何呈現內容。標準模式指令以Windows Internet Explorer 7 標準模式顯示，而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不一樣，EmulateIE7 模式遵循 <!DOCTYPE> 指令。對於多數網站來講，它是首選的兼容性模式。

在現階段，IE8 版本推向市場沒有多久，份額不高。所以，考慮兼容舊版本的模式值得推薦。

 

參考：http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/