标准模式和怪异模式的来由
在 html 与 CSS 的标准化未完成之前, 各个浏览器对于 HTML 和 CSS 的解析有各自不同的实现, 而有很多旧的网页都是按照这些非标准的实现去设计的. 在 HTML 与 CSS 标准确定之后, 浏览器一方面要按照标准去实现对 HTML 与 CSS 的支持, 另一方面又要保证对非标准的旧网页设计的后向兼容性. 因此, 现代的浏览器一般都有两种渲染模式: 标准模式和怪异模式. 在标准模式下, 浏览器按照 HTML 与 CSS 标准对文档进行解析和渲染; 而在怪异模式下, 浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染. 这样的话, 对于旧有的网页, 浏览器启动怪异模式, 就能够使得旧网页正常显示; 对于新的网页, 则可以启动标准模式, 使得新网页能够使用 HTML 与 CSS 的标准特性.
浏览器如何确定使用哪种渲染模式
知道了这两种渲染模式的来由, 那剩下的问题就是浏览器如何能够确定应该使用哪种模式了. 其实归根结底就是, 浏览器如何能将旧网页与新网页区分开来.
平常编写网页的时候, 一般都会见到 HTML 文档的头部会有文档类型声明: DOCTYPE. 当浏览器遇到正确的文档声明时, 浏览器就会启动标准模式, 按照制定的文档类型标准解析和渲染文档. 而对于旧有的网页, 由于网页编写的当时标准还没有确定, 所以一般是不会有文档类型声明的. 所以, 对于没有文档类型声明或者文档类型声明不正确的文档, 浏览器就会认为它是一个旧的 HTML 文档, 就会使用怪异模式解析和渲染该文档. 关于 DOCTYPE 的更详细说明, 请戳这里 DOCTYPE 声明作用及用法详解 http://www.jb51.net/web/34217.html .
标准模式与怪异模式的两个常见区别
盒模型的处理差异: 标准 CSS 盒模型的宽度和高度等于内容区的高度和宽度, 不包含内边距和边框, 而 IE6 之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的. 因此, 对于 IE, 怪异模式和标准模式下的盒模型宽高计算方式是不一样的;
行内元素的垂直对齐: 很多早期的浏览器对齐图片至包含它们的盒子的下边框, 虽然 CSS 的规范要求它们被对齐至盒内文本的基线. 标准模式下, 基于 Gecko 的浏览器将会对齐至基线, 而在 quirks 模式下它们会对齐至底部. 最直接的例子就是图片的显示. 在标准模式下, 图片并不是与父元素的下边框对齐的, 如果仔细观察, 你会发现图片与父元素下边框之间存在一点小空隙. 那是因为标准模式下, 图片是基线对齐的. 而怪异模式下, 则不存在这个问题. 具体请看这篇文章 CSS 深入理解 vertical-align 和 line-height 的基友关系 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ .
来源: http://www.bubuko.com/infodetail-2562425.html