标准模式与混杂模式

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>