浏览器的标准兼容模式和怪异呈现模式以及盒模型

原创 2012年03月27日 09:37:53

盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器。

盒子模型


在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的。

IE6 和 W3C 标准浏览器对盒子模型的不同诠释




width则是元素的实际宽度,内容宽度 = width  -  (margin-left  +  margin-right  +  padding-left  +  padding-right  +  border-left-width  +  border-right-width)



元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right;

由此引出两种模式

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别。

 W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。


那么浏览器究竟该采用哪种模式渲染呢?这就引出的DTD,既是网页的头部声明,浏览器会通过识别DTD而采用相对应的渲染模式:
1. 浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析
4. 在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。
5. 可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。

说来说去就是一句话:加上doctype声明,让浏览器使用标准模式

参考:


新博客已移至:http://keenwon.com

ie浏览器的标准模式与怪异模式的设置与区分方法

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为...
  • hjxgood
  • hjxgood
  • 2015年05月22日 11:44
  • 1534

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。 先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是...

doctype声明、浏览器的标准、怪异等模式

转载地址:http://www.fantxi.com/blog/archives/browser-mode/ 群里看到一个面试题,doctype 标准(严格)模式(Standards M...

doctype声明、浏览器的标准、怪异等模式

转自http://www.fantxi.com/blog/archives/browser-mode/ 群里看到一个面试题,doctype 标准(严格)模式(Standards Mode)、怪异...

doctype声明、浏览器的标准、怪异等模式

转自:http://www.fantxi.com/blog/archives/browser-mode/ 群里看到一个面试题,doctype 标准(严格)模式(Standards Mode)、怪异(...
  • sjf8013
  • sjf8013
  • 2012年10月09日 18:42
  • 611

浏览器的标准模式与怪异模式的设置与区分方法

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为...

浏览器的怪异模式和标准模式的区别

何时触发怪异模式和标准模式 浏览器根据doctype是否存在和哪种DOT格式来决定怪异模式还是标准模式,如果XHTML文档包含完整的DOCTYPE,那么它一般以标准模式呈现 代码对于html4.0文档...

javaScript 计算网页内容的宽与高 (浏览器的标准模式与怪异模式)

标准模式与怪异模式:       由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差...

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

要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。 所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模...

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

要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。 所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浏览器的标准兼容模式和怪异呈现模式以及盒模型
举报原因:
原因补充:

(最多只允许输入30个字)