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
分享到:
相关推荐
软件介绍: ...已在64位windows10系统 ...安装说明:运行ReliefJet Quicks for Outlook安装程序,安装后在outlook会多出一个选项卡,以管理员身份运行Outlook,在quicks Tweaks设置中找到minimize outlook选项。
可以让你的Outlook 关闭后最小化并常驻后台,不会退出
java语言实现的快速排序源码,其中包括java语言的随机数组生成器。
outlook点击右上角的X号时候直接退出,而不是最小化到系统托盘。该压缩文件包括ReliefJetQuicksOutlook安装包以及配置教程
appengine-nodejs-quicks 使用自定义运行时的 Google App Engine 托管 VM 上的 node.js 入门项目。 用法 首先克隆这个存储库。 要在开发应用程序服务器中本地运行应用程序: gcloud preview app run . 如果需要...
安装完以后,打开outlook,文件-选项-加载项-管理“COM 加载项”转到-添加,找到软件安装目录,添加.dll文件...重开outlook,在菜单栏会多一个“ReliefJet”-Quicks options-minimine outlook on close打钩,保存,搞定
免费的redmine-outlook插件,可以根据Outlook邮件直接生成redmine问题,并给邮件打上标记号
脚本的下载
Outlook是微软的非常好用的电子邮箱客户端,但是即使是到了2016版本,该客户端还是有两个比较不人性化的问题,其一是不能开机自启动;其二是点击关闭按钮的时候会直接完全退出而不是后台运行,其实非常不符合我们的...
展望试点 受启发的 Outlook 生产力插件 概述 在工作期间,我发现了并很快接受了它的计划电子邮件以在未来某个时候处理的模型。 我特别喜欢通过标准文件夹结构而不是本地元数据存储来管理日程安排,因为这允许我使用...
1. 安装 2. 打开outlook 添加dll组件,dll就在安装好的目录 3. 添加完以后,outlook会多出一个选项卡,进去设置第一项quicks Tweaks 注意安装和启动都需要右键 管理员执行
特别的,如果BHT表预测跳转,BTB表预测不跳转,或者BHT表预测不跳转,BTB表预测跳转,都不预测当前指令跳转。我们提供了btb.s、bht.s、QuickS
我创建了此回购协议,作为我为进行技术面试准备而一直在练习的数据结构和练习的摘要,全部使用JavaScript。 如果您有任何意见或其他观点,请随时与我联系! 检查我的投资组合:macarenacg.com 最好,玛卡 链表 ...
安装完成后,重新打开Outlook,右上方会出现Reliefjet选项,点开后点击Quicks Options,进入选项。 2.在默认出现的页面,勾选第三个标题Miscelaneous tweaks的最后一个选项Minimiza Outlook on close,然后点击OK...
示例 Qt 展示了如何仅通过编程代码 (c++17) 来使用 Qt 小部件和 Qt Quicks。 * Github 存储库:https://github.com/gammasoft71/Examples.Qt * 主页:https://gammasoft71.wixsite.com/gammasoft/qt
经典的快速排序算法,用于各位学习。
与Qt的QLCDNumber相比,它使用Qt Quicks场景图进行有效渲染。 下图显示了随附的演示程序。 如您所见,该窗口小部件是高度可配置的。制作演示一般的将项目下载并解压缩到任意位置。 打开一个控制台,然后进入解压缩...
ReliefJetQuicksOutlook outlook 插件,可用于点击关闭时自动最小化outlook到任务托盘