标准模式和混杂模式-蒲公英云

标准模式和混杂模式

那么，问题来了，什么情况下页面会处于混杂模式呢？下面是列出的几种：

（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像素的空白，但是在混杂模式下

标准浏览器（CHROM）中div距图片底部默认没有空白

<style>
    .wp{
   background-color: #f00}
</style>
<body >
    <div class="wp">
        <img src="test01.png">
    </div>
</body>

3.在混杂模式下，变格中的字体不会继承它祖先元素（比如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>