標準模式與混雜模式
DOCTYPE 的一個重要作用就是告訴瀏覽器，它該以何種模式呈現。
我們通過document.compatMode這個屬性來檢測，當前頁面處於何種模式：
CSS1Compat：標準模式
BackCompat：混雜模式
那麼，問題來了，什麼情況下頁面會處於混雜模式呢？下面是列出的幾種：
（1）不寫<!DOCTYPE html>
（2）<!DOCTYPE html>前面加上xml宣告 <?xml version="1.0" encoding="utf-8"?> (IE6)
（3）<!DOCTYPE html>和<?xml version="1.0" encoding="utf-8"?>之間加了（標籤、文字、註釋）(ie8以下都有，ie9以上未測)
（4）<!DOCTYPE html>前面有（標籤、文字、註釋）(ie8以下都有，ie9以上未測)
1和4是比較常見的，可能還有其他情況，還沒有遇到過具體的例子。。。我曾經在一篇文章看到說頁面結構錯誤也會引發混雜模式，不知道是怎麼個錯誤法。
第二個問題，我們區分混雜模式與嚴格模式的意義在哪裡？
1、盒模型的解析，這應該是眾所周知的問題了。混雜模式下會按照IE5.5的盒模型解析。而標準模式是按標準的盒模型解析。
2、當一個塊元素div中包含的內容只有圖片時，在標準模式下，不管IE還是標準，在圖片底部都有3畫素的空白。但在混雜模式下，標準瀏覽器（Chrome）中div距圖片底部預設沒有空白。
<style>
.wp{background-color: #f00}
</style>
<body >
<div class="wp">
<img src="test01.png">
</div>
</body>
3、在標準模式下，如果一個單元格中包含的內容只有圖片時，圖片底部預設有3畫素的空白。而在混雜模式下，圖片底部沒有空白。
（對於2、3，標準模式下的底部3畫素空白，與img vertial-align的預設值baseline有關，其實大多數時候我們並不希望它保留空白，去除的方法也很簡單，設定vertial-align為一個不是baseline的合法值即可。）
4、在混雜模式下，表格中的字型不會繼承它祖先元素（比如body，比如包含table的div）的字型樣式
<style>
.wp{font-size: 48px;}
</style>
<body >
<div class="wp">
<table><tr><td>我是48號字</td></tr></table>
</div>
</body>
5、在IE的混雜模式下，給inline元素設定高寬都有效。
<style>
.inline{width: 400px;height: 200px;background-color: #edd;}
</style>
<body >
<span class="inline">我是一個span元素</span>
</body>
6、在混雜模式下，IE和其他瀏覽器對百分比寬度的解析是不一樣的。如果父級是行內塊或者浮動或者有定位的元素，給子元素設定百分比寬度100%時，IE的混雜會以父級的100%算（父級沒有設定寬度，再往上一層），而標準瀏覽器是取決於內容的寬度
<style>
.wp{
float: left;
/* display: inline-block;
position: absolute;
position: relative;
position: fixed;*/
}
.box{width: 100%;background-color: #edd;}
</style>
<body >
<div style="width:500px;">
<div class="wp">
<div class="box">
123
</div>
</div>
</div>
</body>
7、在混雜模式下，當我們給一個元素設百分比高度，其他瀏覽器（正常，inline高度無變化，inline-block和block都會按百分比），而IE是自適應到內容高度。
<style>
.wp{display: inline-block;}
.box{height: 100%;background-color: #edd;}
</style>
<body >
<div style="height:200px;">
<span class="wp">
<div class="box">
123
</div>
</span>
</div>
</body>
8、overflow溢位預設值的問題。標準模式下，溢位元素是溢位可見的，超出部分的內容呈現在它的包含元素外。在混雜模式下，IE瀏覽器的溢位元素會自適應內容的尺寸。
<style>
.wp{height: 100px;width:200px;background-color: #dee}
</style>
<body >
<div class="wp">
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123
</div>
</body>
