Quirks Mode & Standards Mode

一篇关于Quirks Mode & Standards 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代码 <embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://kino.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" width="14" height="15" type="application/x-shockwave-flash" flashvars="clipboard=%3Cstrong%3E%09var%20ua%20%3D%20navigator.userAgent.toLowerCase()%3B%0A%20%20%20%20%20%20%20%20var%20client%20%3D%20%7B%0A%20%20%20%20%20%20%20%20isStrict%3A%20%20%20document.compatMode%20%3D%3D%20'CSS1Compat'%2C%0A%20%20%20%20%20%20%20%20isOpera%3A%20%20%20%20ua.indexOf('opera')%20%3E%20-1%2C%0A%20%20%20%20%20%20%20%20isIE%3A%20%20%20%20%20%20%20ua.indexOf('msie')%20%3E%20-1%2C%0A%20%20%20%20%20%20%20%20isIE7%3A%20%20%20%20%20%20ua.indexOf('msie%207')%20%3E%20-1%2C%0A%20%20%20%20%20%20%20%20isSafari%3A%20%20%20%2Fwebkit%7Ckhtml%2F.test(ua)%2C%0A%20%20%20%20%20%20%20%20isWindows%3A%20%20ua.indexOf('windows')%20!%3D%20-1%20%7C%7C%20ua.indexOf('win32')%20!%3D%20-1%2C%0A%20%20%20%20%20%20%20%20isMac%3A%20%20%20%20%20%20ua.indexOf('macintosh')%20!%3D%20-1%20%7C%7C%20ua.indexOf('mac%20os%20x')%20!%3D%20-1%2C%0A%20%20%20%20%20%20%20%20isLinux%3A%20%20%20%20ua.indexOf('linux')%20!%3D%20-1%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20client.isBorderBox%20%3D%20client.isIE%20%26%26%20!client.isStrict%3B%0A%20%20%20%20%20%20%20%20client.isSafari3%20%3D%20client.isSafari%20%26%26%20!!(document.evaluate)%3B%0A%20%20%20%20%20%20%20%20client.isGecko%20%3D%20ua.indexOf('gecko')%20!%3D%20-1%20%26%26%20!client.isSafari%3B%0A%0A%20%20%20%20%20%20%20%20%2F**%0A%20%20%20%20%20%20%20%20%20*%20You're%20not%20sill%20using%20IE6%20are%20you%3F%0A%20%20%20%20%20%20%20%20%20*%2F%0A%20%20%20%20%20%20%20%20var%20ltIE7%20%3D%20client.isIE%20%26%26%20!client.isIE7%3B%3C%2Fstrong%3E" quality="high" allowscriptaccess="samedomain">
  1. <strong> var ua = navigator.userAgent.toLowerCase();
  2. var client = {
  3. isStrict: document.compatMode == 'CSS1Compat',
  4. isOpera: ua.indexOf('opera') > -1,
  5. isIE: ua.indexOf('msie') > -1,
  6. isIE7: ua.indexOf('msie 7') > -1,
  7. isSafari: /webkit|khtml/.test(ua),
  8. isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,
  9. isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,
  10. isLinux: ua.indexOf('linux') != -1
  11. };
  12. client.isBorderBox = client.isIE && !client.isStrict;
  13. client.isSafari3 = client.isSafari && !!(document.evaluate);
  14. client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;
  15. var ltIE7 = client.isIE && !client.isIE7;</strong>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值