浏览器的标准兼容模式和怪异呈现模式以及盒模型
2012-03-27 09:37
337 查看
盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器。
在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的。
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声明,让浏览器使用标准模式
参考:
重新认识IE盒模型bug
说说标准——你真的了解盒子模型(box model)吗?
关于浏览器盒模型小整理
浏览器Quirksmode(怪异模式)与标准模式(再回顾下)
新博客已移至:http://keenwon.com
盒子模型
在内容区外面,依次围绕着 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声明,让浏览器使用标准模式
参考:
重新认识IE盒模型bug
说说标准——你真的了解盒子模型(box model)吗?
关于浏览器盒模型小整理
浏览器Quirksmode(怪异模式)与标准模式(再回顾下)
新博客已移至:http://keenwon.com
相关文章推荐
- 浏览器的标准模式和怪异模式以及他们的区别
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
- 浏览器的标准模式和怪异模式之间的区别
- 浏览器的标准模式和怪异模式有什么区别?
- 浏览器的标准模式和怪异模式
- 浏览器 怪异模式(Quirks Mode) 与 标准模式(Standards Mode)
- 浏览器的标准模式和怪异模式
- 【css】doctype声明、浏览器的标准、怪异等模式
- javaScript 计算网页内容的宽与高 (浏览器的标准模式与怪异模式)
- 浏览器的标准模式和怪异模式
- 浏览器标准模式和怪异模式之间的区别是什么?
- 浏览器怪异模式和标准模式
- 浏览器标准模式(standars mode)与怪异模式(Quirks mode)浅析
- 【javascript】标准模式与怪异模式下CSS以及JS的区别
- 浏览器标准模式和怪异模式之间的区别是什么?
- 标准模式 怪异模式 盒模型 doctype
- 浏览器的标准模式和怪异模式的区别
- doctype声明、浏览器的标准、怪异等模式
- 浏览器的标准模式与怪异模式