Tom：以“==浏览器的两种模式quirks 和strict== 在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没...”为内容创建页面

2012-08-11T07:03:04Z

以“==浏览器的两种模式quirks 和strict== 在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没...”为内容创建页面

新页面

==浏览器的两种模式quirks 和strict==

在看js代码时，有时会看到关于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下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注：Explorer 5仍然只支持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进行解析的。

在ie6中，如果在doctype声明前有一个xml声明(比如:?xml version="1.0" encoding="iso-8859-1"?)，则采用quirks mode解析。这条规则在ie7中已经移除了。

5、mozilla提出了almost strict moede ，和strict mode的区别是：

img元素在strict中是inline的，而在almost strict mode中是block的。其实我们前面所说，在大多数浏览器，大多数doctype声明触发的是almost strict mode;

6、 quirks mode和strict mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。

什么是盒模式？这是针对块级元素说的，我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子，而 margin,padding,border,width这些css属性构成了盒模式。

而区别就是产生在width属性上：

在strict mode中：

width是内容宽度，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在quirks mode中：

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

这里把盒模式相关的东西记录一下，备忘！

•内联元素，例如a、span等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。注2. 内联元素（display: inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

• 浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

•如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。

•边界值可为负，其显示效果各浏览器可能不相同。

•填充值不可为负。

•边框默认的样式（border-style）为不显示（none）。

7、在quirks mode 和 strict mode中还有一个区别，但没经过验证，我只是发现有这个现象。

在strict mode 中，

table的css属性font-size会继承父级元素的，也就是说，table中的字体大小会继承父级元素字体的大小。

在quirks mode 中，

table 的css属性font-size不会继承父级元素的，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。

8、在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode

9、我们在编写跨浏览器兼容性的js代码时，常用到的判断代码(来源于ext) ：

Js代码
var ua = navigator.userAgent.toLowerCase();
var client = {
isStrict: document.compatMode == 'CSS1Compat',
isOpera: ua.indexOf('opera') -1,
isIE: ua.indexOf('msie') -1,
isIE7: ua.indexOf('msie 7') -1,
isSafari: /webkit|khtml/.test(ua),
isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,
isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,
isLinux: ua.indexOf('linux') != -1
};
client.isBorderBox = client.isIE && !client.isStrict;
client.isSafari3 = client.isSafari && !!(document.evaluate);
client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;

/**
* You're not sill using IE6 are you?
*/
var ltIE7 = client.isIE && !client.isIE7;

var ua = navigator.userAgent.toLowerCase();
var client = {
isStrict: document.compatMode == 'CSS1Compat',
isOpera: ua.indexOf('opera') -1,
isIE: ua.indexOf('msie') -1,
isIE7: ua.indexOf('msie 7') -1,
isSafari: /webkit|khtml/.test(ua),
isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,
isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,
isLinux: ua.indexOf('linux') != -1
};
client.isBorderBox = client.isIE && !client.isStrict;
client.isSafari3 = client.isSafari && !!(document.evaluate);
client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;

/**
* You're not sill using IE6 are you?
*/
var ltIE7 = client.isIE && !client.isIE7;

10、废话：我不知道现在的很多js框架为什么还对解析模式进行了判断。我认为这些框架肯定是给现在要开发的项目使用的，那应该都是strict mode才对呀？是不是因为还有很多人不习惯给页面加上doctype声明呢？
[[category:javascript]]

浏览器的两种模式quirks 和strict - 版本历史

Tom：以“==浏览器的两种模式quirks 和strict== 在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没...”为内容创建页面