标准模式与混杂模式

最新推荐文章于 2023-07-03 06:46:42 发布

夏天的风欧阳冰嫣

最新推荐文章于 2023-07-03 06:46:42 发布

阅读量575

点赞数

分类专栏： JavaScript 前端开发文章标签： js 浏览器模式

本文链接：https://blog.csdn.net/wenjiusui8083/article/details/79392141

版权

前端开发同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

JavaScript

10 篇文章 1 订阅

订阅专栏

标准模式与混杂模式

DOCTYPE 的一个重要作用就是告诉浏览器，它该以何种模式呈现。

我们通过document.compatMode这个属性来检测，当前页面处于何种模式：

CSS1Compat：标准模式

BackCompat：混杂模式

在标准模式中，浏览器以其支持的最高标准呈现页面，；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

模式触发

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

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

（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>

夏天的风欧阳冰嫣

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
标准模式与混杂模式

标准模式与混杂模式DOCTYPE 的一个重要作用就是告诉浏览器，它该以何种模式呈现。我们通过document.compatMode这个属性来检测，当前页面处于何种模式：CSS1Compat：标准模式BackCompat：混杂模式在标准模式中，浏览器以其支持的最高标准呈现页面，；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。模式触发浏览...
复制链接

扫一扫