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声明,大多数浏览器采用下面的这些判定规则: a) 浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用 quirks mode解析。 b) 对于拥有doctype声明的网页,什么浏览器采用何种模式解析, 这里有一张具体列表可参考: http://hsivonen.iki.fi /doctype/ (这个参考很重要) c) 对于拥有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、在js中如何判定当前浏览器正在以何种方式解析? document对象有个属性compatmode ,它有两个值: BackCompat 对应 quirks mode CSS1Compat 对应 strict mode -------------------------------分割线 ---------------------------------------- 1、我对一些细节进行了 加粗,希望可以有的放矢。 2、针对 “盒”模型,希望大家不要纠结于此,padding和width不要设置在同一个元素上面, 可以通过嵌套一层来实现。 3、现在doctype可以写成:<!DOCTYPE html> 是完全没有问题的,它遵循的是strict mode。 而且还可以使用html5元素。 |