浏览器的混杂模式和标准模式

##浏览器的混杂模式和标准模式
有时候代码没问题，但是执行时不会报错却也显示不出来，就要考虑一下浏览器的兼容问题
浏览器是存在混杂模式和标准模式的，所以有时候对象的获取设置，会不太一样，关于浏览器的混杂模式以及标准模式，可以参考一下
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyr_student/article/details/86242391
扩展：

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）不写
（2）前面加上xml声明 <?xml version="1.0" encoding="utf-8"?> (IE6)
（3）和<?xml version="1.0" encoding="utf-8"?>之间加了（标签、文本、注释）(ie8以下都有，ie9以上未测)
（4）前面有（标签、文本、注释）(ie8以下都有，ie9以上未测)

2）标准模式

正常建立
————————————————
版权声明：本文为CSDN博主「??or??」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhangyr_student/article/details/86242391

浏览器的混杂模式和标准模式相关推荐

文档模式：标准模式、混杂模式
一. 背景: 由于历史的原因,不同浏览器对页面的渲染是不同的,甚至同一浏览器的不同版本也是不同的.然后这时候就出现了一个至关重要的标准规范:W3C标准. 在W3C标准出台之前,不同的浏览器在页面的渲 ...
浏览器怪异模式和标准模式之间的区别 DTD
从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差 ...
浏览器的怪异模式和标准模式的区别
何时触发怪异模式和标准模式浏览器根据doctype是否存在和哪种DOT格式来决定怪异模式还是标准模式,如果XHTML文档包含完整的DOCTYPE,那么它一般以标准模式呈现代码对于html4.0文档 ...
怪异模式和标准模式的定义和区别
所谓的标准模式是指,浏览器按W3C标准解析执行代码: 怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式. 浏览器解析时到底使用标准模式还是怪异模 ...
Doctype作用及兼容模式与标准模式的区别
一.Doctype作用 <!DOCTYPE>声明位于HTML文档中的第一行,处于<html>标签之前.告知浏览器的解析器用什么文档标准解析这个文档. DOCTYPE不存在或格式 ...
html严格模式和标准模式，怎么触发这两种模式
声明位于文档的最前位置,处于标签之前,可以告诉浏览器使用哪种html/xhmtl文档该标签有三种类型:严格版本.过度版本.以及基于框架的html文档 1.浏览器模式标准模式:浏览器根据规范呈现页面 ...
严格模式和标准模式的区别（附严格模式实战实例）
严格模式是一种许可式(opt-in)机制,允许开发人员使用 JavaScript 语言的一个有限但更整洁的子集. 严格模式可以在脚本或函数级别实现. "严格模式"体现了Javasc ...
准标准模式和标准模式之间的差别-1(旧文首发)
"理论上,标准模式和准标准模式的区别仅在于非IE6/7浏览器对于单元格里(原文说法可能有误,经测试所有图片均受影响)图片布局的不同处理.同事渔隐做了细致地测试并给出了解决方案. Update ...
Java设计模式学习总结（9）——结构型模式之过滤器模式（标准模式）
过滤器模式( Filter Pattern )或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来.这 ...

浏览器的混杂模式和标准模式

浏览器的混杂模式和标准模式相关推荐

最新文章

热门文章