历史原因

在W3C标准未确定之前，各浏览器对于HTML和CSS有各自不同的解析方式，很多旧网页都是在W3C标准未确定时期实现、设计的。在W3C标准确定之后，浏览器为了保证对非标准的旧网页设计的后向兼容性。现代浏览器（IE6以上，IE6以下版本永远定在了怪异模式）一般都有两种渲染模式：标准模式和怪异模式。

在标准模式下，浏览器按照W3C标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示。

简单来说

标准模式：浏览器按照W3C标准解析执行代码；

怪异模式：浏览器根据自己向后兼容的方式解析执行代码；

获取当前模式

在控制台输入 document.compatMode 就可以知道当前的模式。

BackCompat：怪异模式

CSS1Compat：标准模式

开启怪异模式

没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！正确的说法应该是没有定义doctype才会开启怪异模式。

在标准化之前写的页面是没有doctype的，因此没有doctype的页面是在怪异模式下渲染的。
如果web开发人员加入的doctype，大部分的doctype会开启标准模式，页面也会按照标准来渲染。

标准模式与怪异模式区别

盒模型宽高：

在怪异模式下，盒模型为怪异盒模型，宽高包含padding和border；
在标准模式下，盒模型为标准盒子模型，宽高为内容宽高不包含padding和border；

图片垂直对齐方式

对于行内元素和table-cell元素，标准模式下vertical-align属性默认值是baseline；
在怪异模式下，table单元格中的图片的vertical-align属性默认值是bottom，因此在图片底部会有几像素的空间；

元素中的字体

css中font的属性都是可以继承的；
怪异模式下，对于table元素，字体的某些元素不能从其他封装元素继承中得到，特别是font-size属性

内联元素的尺寸

标准模式下，non-replaced inline元素无法自定义大写；
怪异模式下，定义元素的宽高会影响元素的尺寸；

元素的百分比高度

当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化；
在怪异迷失下，百分比被准确应用；

元素溢出的处理

标准模式下，overflow取值默认值为visible；
在怪异模式下，这个溢出会被当做扩展box对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容；

总结

个人学习总结，谢谢大家观看！

如有问题欢迎各位指正

浏览器的标准模式、怪异模式相关推荐

[css] 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
doctype声明、浏览器的标准、怪异等模式
doctype 标准(严格)模式(Standards Mode).怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义? 触发标准模式 1.加DOCTYPE声明,比如: <!D ...
聊聊浏览器的标准模式和怪异模式
前言对于DOCTYPE这个词,相信大家都不陌生,现在我们编写html文件的时候,头部第一句就是这个声明,但是相信很多人都不知道这个是干什么用的吧,看完这篇文章让自己更精进一步! 来源在很久很久以前 ...
浏览器标准模式和怪异模式之间的区别
浏览器标准模式和怪异模式之间的区别是什么? 在"标准模式"(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在"怪异模式"(Qui ...
浏览器的怪异模式和标准模式的区别
何时触发怪异模式和标准模式浏览器根据doctype是否存在和哪种DOT格式来决定怪异模式还是标准模式,如果XHTML文档包含完整的DOCTYPE,那么它一般以标准模式呈现代码对于html4.0文档 ...
html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式怪异模式盒模型今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
浏览器标准模式与怪异模式的区别
两种模式的不同主要表现在盒模型和渲染模式的不同上要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode) 所谓的标准模式是 ...
浏览器怪异模式和标准模式之间的区别 DTD
从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差 ...
浏览器标准模式和怪异模式
什么是标准模式和怪异模式? 在实现html和css标准化之前,各个浏览器对html和css的解析各有不同,甚至是同一个浏览器的不同版本渲染方式也不同(比如IE6和IE7).在W3C制定标准之后,浏览器 ...

浏览器的标准模式、怪异模式

历史原因

获取当前模式

开启怪异模式

标准模式与怪异模式区别

浏览器的标准模式、怪异模式相关推荐

最新文章

热门文章