浏览器标准模式和怪异模式

什么是标准模式和怪异模式？

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

浏览器如何确定渲染模式呢？

　　在编写HTML文档时，一般都会在文档的开头，html标签之前声明文档类型：DOCTYPE，当浏览器在解析html文档时，若遇到正确的文档声明，则启用标准模式，按照标准来解析和渲染文档。而对于旧的html文档，或没有DOCTYPE声明的文档，则按照怪异模式来解析文档。html5的文档声明方式：<!DOCTYPE HTML> 。

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

1、width不同

　　在标准模式中：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。

2、内联元素的尺寸

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

3、可设置百分比的高度

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

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

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

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

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

7、元素溢出的处理

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

转载于:https://www.cnblogs.com/trista222/p/7526662.html

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

浏览器标准模式与怪异模式的区别
两种模式的不同主要表现在盒模型和渲染模式的不同上要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode) 所谓的标准模式是 ...
聊聊浏览器的标准模式和怪异模式
前言对于DOCTYPE这个词,相信大家都不陌生,现在我们编写html文件的时候,头部第一句就是这个声明,但是相信很多人都不知道这个是干什么用的吧,看完这篇文章让自己更精进一步! 来源在很久很久以前 ...
浏览器标准模式和怪异模式之间的区别
浏览器标准模式和怪异模式之间的区别是什么? 在"标准模式"(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在"怪异模式"(Qui ...
浏览器的标准模式、怪异模式
历史原因在W3C标准未确定之前,各浏览器对于HTML和CSS有各自不同的解析方式,很多旧网页都是在W3C标准未确定时期实现.设计的.在W3C标准确定之后,浏览器为了保证对非标准的旧网页设计的后向兼容 ...
浅谈浏览器标准模式与怪异模式、文档类型
在网页设计制作过程中,新人往往会遇到一个问题,就是浏览器的不兼容问题.这种状况在大学学习过程中会经常遇到,但一直也没有得到很好的解决,今天有机会仔细研究了一下,这是有关浏览器标准模式与怪异模式之间的问 ...
浏览器标准模式与怪异模式-CSS1Compat and BackCompat
浏览器标准模式与怪异模式-CSS1Compat and BackCompat 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前, ...
浏览器的标准模式与怪异模式
由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为 ...
“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）
在标准模式页面按照HTML,CSS的定义渲染,而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式.浏览器基于页面中文件类型描述的存在以决定采用哪 ...
HTML的标准模式与怪异模式
HTML的标准模式与怪异模式 HTML 的结构在HTML4中 DOCTYPE有三种模式标准模式与怪异模式 HTML 的结构 <html><head><meta cha ...

浏览器标准模式和怪异模式

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

最新文章

热门文章