標準模式與混雜模式

doctype 的乙個重要作用就是告訴瀏覽器，它該以何種模式呈現。

我們通過document.compatmode這個屬性來檢測，當前頁面處於何種模式：

css1compat：標準模式

backcompat：混雜模式

那麼，問題來了，什麼情況下頁面會處於混雜模式呢？下面是列出的幾種：

（1）不寫

（2）前面加上xml宣告 <?xml version="1.0" encoding="utf-8"?> (ie6)

（3）和<?xml version="1.0" encoding="utf-8"?>之間加了（標籤、文字、注釋）(ie8以下都有，ie9以上未測)

（4）前面有（標籤、文字、注釋）(ie8以下都有，ie9以上未測)

1和4是比較常見的，可能還有其他情況，還沒有遇到過具體的例子。。。我曾經在一篇文章看到說頁面結構錯誤也會引發混雜模式，不知道是怎麼個錯誤法。

第二個問題，我們區分混雜模式與嚴格模式的意義在**？

1、盒模型的解析，這應該是眾所周知的問題了。混雜模式下會按照ie5.5的盒模型解析。而標準模式是按標準的盒模型解析。

2、當乙個塊元素div中包含的內容只有時，在標準模式下，不管ie還是標準，在底部都有3畫素的空白。但在混雜模式下，標準瀏覽器（chrome）中div距底部預設沒有空白。

3、在標準模式下，如果乙個單元格中包含的內容只有時，底部預設有3畫素的空白。而在混雜模式下，底部沒有空白。

（對於2、3，標準模式下的底部3畫素空白，與img vertial-align的預設值baseline有關，其實大多數時候我們並不希望它保留空白，去除的方法也很簡單，設定vertial-align為乙個不是baseline的合法值即可。）

4、在混雜模式下，**中的字型不會繼承它祖先元素（比如body，比如包含table的div）的字型樣式

我是48號字

5、在ie的混雜模式下，給inline元素設定高寬都有效。

我是乙個span元素

6、在混雜模式下，ie和其他瀏覽器對百分比寬度的解析是不一樣的。如果父級是行內塊或者浮動或者有定位的元素，給子元素設定百分比寬度100%時，ie的混雜會以父級的100%算（父級沒有設定寬度，再往上一層），而標準瀏覽器是取決於內容的寬度

7、在混雜模式下，當我們給乙個元素設百分比高度，其他瀏覽器（正常，inline高度無變化，inline-block和block都會按百分比），而ie是自適應到內容高度。

8、overflow溢位預設值的問題。標準模式下，溢位元素是溢位可見的，超出部分的內容呈現在它的包含元素外。在混雜模式下，ie瀏覽器的溢位元素會自適應內容的尺寸。