HTML - 标准模式 vs. 怪异模式

时间 2020-07-25

标签 html 标准模式怪异栏目 HTML 繁體版

原文原文链接

前言

在实现html和css标准化以前，各个浏览器对html和css的解析各有不一样，甚至是同一个浏览器的不一样版本渲染方式也不一样（好比：IE6&IE7）。在W3C指定标准以后，浏览器既要按照标准去实现HTML和CSS的支持，又要保证可以兼容之前的非标准的旧网页，因而就有了如今所说的标准模式和兼容模式。css

浏览器如何肯定渲染模式

在编写HTML文档时，通常都会在文档的开头（html标签以前）声明文档类型：DOCTYPE。当浏览器在解析html文档时，若遇到正确的文档声明，则启用标准模式，按照标准来解析和渲染文档。而对于旧的html文档或没有DOCTYPE声明的文档，则按照怪异模式来解析文档。浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。html

html5的文档声明方式：<!DOCTYPE HTML>html5

如何判断这两种模式

一、在 Firefox中，请从右键菜单选择查看页面信息，而后查看渲染模式。浏览器

二、在 Internet Explorer中，请按下F12，而后查看文档模式。字体

三、经过代码判断：网站

window.top.document.compatMode 若是语句返回为：backCompat表示怪异模式，若是为CSS1Compat则表示为标准模式。ui

标准模式（strict mode）

标准模式（严格模式），浏览器按W3C标准解析执行代码，spa

怪异模式（quirks mode）

怪异模式（混杂模式），使用浏览器本身的方式解析执行代码code

标准模式和怪异模式的区别

一、width不一样htm

　　在标准模式中：width是内容（content）宽度，元素真正的宽度是外边距、内边距、边框宽度的和，即元素宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right。

　　在怪异模式中：width则是元素的实际宽度，width = border-left-width + padding-left+ 内容(content)宽度 + padding-right + border-right-width。

二、内联元素的尺寸

　　标准模式中，给span等行内元素设置width和height都不会生效，而在怪异模式下，却会生效。

三、可设置百分比的高度

　　在标准模式下，一个元素的高度由其包含的内容content决定，若是父元素没有设置高度，子元素设置一个百分比高度是无效的。

四、用margin : 0 auto设置水平居中

　　在标准模式下可使元素水平居中，可是在怪异模式下，无效，能够用text-align : center;来实现居中。

五、怪异模式下设置图片的padding会失效

六、怪异模式下table中的字体属性不能继承上层的设置

七、元素溢出的处理

　　标准模式下，overflow默认去visible，在怪异模式下，溢出会被当作扩展box来对待，溢出不会裁减，元素框自动调整大小，可以包含溢出内容。