浏览器混杂模式和标准模式笔记

最新推荐文章于 2022-02-09 20:27:26 发布

??or??

最新推荐文章于 2022-02-09 20:27:26 发布

阅读量788

点赞数 4

分类专栏： js

本文链接：https://blog.csdn.net/zhangyr_student/article/details/86242391

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

扩展：

1.DOCTYPE的作用：首先这个声明不是HTML标签，而是一种语法格式。DOCTYPE是定义浏览器使用什么样的文本类型定义（DTD）载入页面，也就是告诉浏览器使用什么样的HTML或者XHTML规范来解析html。一般情况下出现在html文档的开头

1.文档模式的意义：

IE5.5引入了文档模式的概念，通过使用DOCTYPE实现模式切换，它的主要作用是告诉浏览器以哪种模式呈现，如何解析文档，也就是说两种模式主要影响css内容的呈现，某些情况下也会影响js的执行。

2.两种模式的定义：

1）混杂模式又称怪异模式或兼容模式，指浏览器按照自己的方式来解析代码，页面以宽松的向后兼容的解析方式，是实现IE5.5以下版本浏览器的渲染模式。就严格度上来说不如严格模式，但是模拟老式浏览器的行为可以防止站点无法工作

2）标准模式又称严格模式，是一种要求严格地DTD，排版和js运作模式根据web标准去解析页面的模式

3.两种模式的区别：

1)盒模型的解析：混合模式盒模型的宽高=内容的宽高；标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高

2)当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

3）设置行内元素的高度：标准模式，给span等行内元素设置width和height没有效果；混杂模式下，会生效

4）设置百分比的宽度：标准模式，一个元素的高度是由它包含的内容决定的，若父元素没有设置高度，子元素设置一个百分比的高度是无效的。

5）margin：0 auto设置水平居中在IE下会失效

标准模式下可以使元素水平居中，混杂模式下的解决办法用text-align

6）混杂模式下table的自提属性不能继承上层的设置

7）混合模式下white-space：pre会失效

4.如何判断两种模式

if(document.compatMode=="CSS1Compat" ) {

　　console.log('标准模式');

}else {

　　console.log('混杂模式');

}

5.如何触发

1）混杂模式

（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以上未测)

2）标准模式

正常建立

??or??

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浏览器混杂模式和标准模式笔记

扩展：1.DOCTYPE的作用：首先这个声明不是HTML标签，而是一种语法格式。DOCTYPE是定义浏览器使用什么样的文本类型定义（DTD）载入页面，也就是告诉浏览器使用什么样的HTML或者XHTML规范来解析html。一般情况下出现在html文档的开头 1.文档模式的意义：IE5.5引入了文档模式的概念，通过使用DOCTYPE实现模式切换，它的主要作用是告诉浏览器以哪种模式呈...
复制链接

扫一扫