ie和firefox 盒子模型区别以及quirks mode(怪异模式)和strict mode(严格格式)
2013-05-16 19:30
351 查看
以前一直没有注意过这个问题，这次是因为公司的项目把html的声明
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
给注视掉了，才出现了这个问题，如果有这个声明浏览器都是按照w3c的标准来解析元素布局模式的。公司因为有特殊的需求，自定义了很多东西，不想浏览器严格按照标准解析，就把这个给注视掉了。正因为这样，让我摸不着头脑怎么回事，不同浏览器里明明stlye都一样，div元素大小却不一样。现在知道怎么回事了。
IE和W3C分别有一套盒子模型，Firefox中采用W3C标准模型，而IE中则采用Microsoft自己的标准，
看下面2个示例图：
很明显，W3C标准认为，盒子的宽度仅仅是内容的宽度，而IE标准认为“内容+padding+border”才是盒子的宽度。
IE和W3C分别有一套盒子模型，Firefox中采用W3C标准模型，而IE中则采用Microsoft自己的标准，
看下面2个示例图：
很明显，W3C标准认为，盒子的宽度仅仅是内容的宽度，而IE标准认为“内容+padding+border”才是盒子的宽度
我们可以将用CSS Hack 来区分2个标准：（具体参见css Hack 说明，利用不同浏览器识别css特殊符号能力不同来定义css）
另外，如果在定义HTML使用了<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”> 那么就不会有这个问题，所有的Box模型都将使用W3C标准，不管是在IE中还是其他浏览器中。
-----------------------------------------------------
2、历史原因。
当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).
3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。
一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。
4、浏览器如何判断何用哪种方式解析CSS？
解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则
浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：
对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
quirks mode和strict mode最大的不同就是提现在对盒模式的解释上，上面已经提到了就不重复了。
[b]5、在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode[/b]
就是没有注意这个，发现ie打开项目的网页都是默认用quirks模式，导致页面乱掉，加上声明后就好了。之前还在根据不同浏览器在js里，在css来做判断进行样式的调整，废了不少力，现在把这个加上就规范得多了，不用弄得那么复杂，以后产品开发人员自定义开发的时候也简单了。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
给注视掉了，才出现了这个问题，如果有这个声明浏览器都是按照w3c的标准来解析元素布局模式的。公司因为有特殊的需求，自定义了很多东西，不想浏览器严格按照标准解析，就把这个给注视掉了。正因为这样，让我摸不着头脑怎么回事，不同浏览器里明明stlye都一样，div元素大小却不一样。现在知道怎么回事了。
IE和W3C分别有一套盒子模型，Firefox中采用W3C标准模型，而IE中则采用Microsoft自己的标准，
看下面2个示例图：
很明显，W3C标准认为，盒子的宽度仅仅是内容的宽度，而IE标准认为“内容+padding+border”才是盒子的宽度。
IE和W3C分别有一套盒子模型，Firefox中采用W3C标准模型，而IE中则采用Microsoft自己的标准，
看下面2个示例图：
很明显，W3C标准认为，盒子的宽度仅仅是内容的宽度，而IE标准认为“内容+padding+border”才是盒子的宽度
我们可以将用CSS Hack 来区分2个标准：（具体参见css Hack 说明，利用不同浏览器识别css特殊符号能力不同来定义css）
另外，如果在定义HTML使用了<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”> 那么就不会有这个问题，所有的Box模型都将使用W3C标准，不管是在IE中还是其他浏览器中。
-----------------------------------------------------
浏览器的两种模式quirks mode(怪异模式)和strict mode(严格格式)
1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。2、历史原因。
当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).
3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。
一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。
4、浏览器如何判断何用哪种方式解析CSS？
解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则
浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：
对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
quirks mode和strict mode最大的不同就是提现在对盒模式的解释上，上面已经提到了就不重复了。
[b]5、在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode[/b]
就是没有注意这个，发现ie打开项目的网页都是默认用quirks模式，导致页面乱掉，加上声明后就好了。之前还在根据不同浏览器在js里，在css来做判断进行样式的调整，废了不少力，现在把这个加上就规范得多了，不用弄得那么复杂，以后产品开发人员自定义开发的时候也简单了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 盒子模型（BOX Model) 在IE和Firefox中的区别
- CSS标准盒模型与IE盒子模型以及弹性盒模型
- IE 怪异模式（Quirks Mode）对 HTML 页面的影响
- 怪异模式下的盒子模型
- 标准盒子模型和IE盒子模型的区别
- 两种盒模型（浏览器的两种模式quirks mode 和strict mode）
- ie与firefox 的区别以及event的区别
- 标准盒子模型与IE盒子模型区别
- 浏览器的标准模式和怪异模式以及他们的区别
- 浏览器的标准兼容模式和怪异呈现模式以及盒模型
- Doctype的作用以及浏览器的严格模式和混杂模式的区别
- 【javascript】标准模式与怪异模式下CSS以及JS的区别
- <div+css页面布局课堂笔记>3---页面布局的盒子模型（IE与其他浏览器区别）
- DOCTYPE声明、显示模式（标准模式、怪异模式）、盒子模型
- 标准盒子模型和IE盒子模型的区别
- IE盒子模型和标准盒子模型区别
- ie盒子模型和高级浏览器的区别
- css 标准盒子模型和ie盒子模型的区别和各自的特点
- js判断ie版本以及怪异模式，纯JS，可封装组件。
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别