在看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)
:
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声明呢?
本文地址:http://kino.iteye.com/blog/241260
,转载请注明,谢谢!
分享到:
相关推荐
(资料备考 暂时不明白也无关系) 今天偶然看到了一道题中有这样一段: 在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果 其实对于学习标准的人可能更多的人熟悉Quirksmode,也许很多人(对JS不太熟悉的...
浏览器Quirksmode(怪异模式)与CSS1compat.docx
面试官:请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式,当你打开IE9时候会看见,浏览器模式,文档模式,兼容性视图,这些又是什么? 好吧,一点点来:先明白一个词DTD(文档类型...
资源名称:CSS基础知识...为了实现这一点,他们创建了两种表现形式:标准模式和怪异模式(quirks mode)。怪异模式通常模拟老式浏览器(比如IE6,在标准模式中 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
html-quirk-mode我用浏览器的“怪癖模式”进行的黑客行为/实验,看看我可以用它做些什么酷的事情!概括-->--安装笔记我一直在研究有人检查浏览器是否以怪癖模式运行时如何使html尊重换行符。 Check your doctype ...
文档模式主要有以下两个作用: 1、告诉浏览器使用什么样的...BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式) CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks...
我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE...
NULL 博文链接:https://theoffspring.iteye.com/blog/1582300
其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在不声明Doctype的情况下,浏览器默认是Quirks Mode。所以为兼容性考虑,我们可能需要...
### 14、实现不使用 border 画出1px高的线,在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果** ### 15、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别? ### ...
决定使用何种协议来解析,以及切换浏览器模式。 浏览器模式: 3.1 标准模式、3.2 混杂模式。 3.1 标准模式 标准模式(standards mode):浏览器根据W3C标准来渲染页面。 3.2 混杂模式 混杂模式(quirks mode):...
我们致力于为所有人提供一个友好,安全和热情的环境。 请阅读并遵守。 拉取要求 简而言之,请更改quirks.bs并提交您的补丁,并附带一条。 如果您是这里的新手,请考虑阅读。 即使是微不足道的修复,也请在您的第一...
随着IE8 beta1的发布,发现连sina有显示问题,由于IE8 对标准的“良好”执行,当 XHTML 文档使用 Transitinal 类型时,会自动选择 Quirks 模式,即 IE5 的模式来解析,所以也就不难理解为何大多数站点会遭遇显示问题...
Legacy platform_data quirks.
Chrome Quirks是一个有趣的扩展程序,可让您将预加载的效果或自定义CSS注入到您访问的任何网页上。 开发人员可以快速轻松地编辑CSS并测试想法。 此扩展程序吸引了好奇和恶作剧的人,他们不禁与那些不太懂技术的朋友...
USB HID quirks support for Linux.
他拥有多年客户端web开发经验,所维护的网站www.quirksmode.or9已成为全球JavaScript开发人员最重要的参考资源之一。他常年为业界顶尖的媒体 Digital Web Magazine、AList apart等撰写技术文章,包括影响深远的The...
//使用MooToolswindow.addEvent('unload',Cookie.delete.pass('... // http://www.quirksmode.org/js/cookies.htmlvar橡皮擦=函数(){ }; if(window.addEventListener)window.addEventListener('unload',...