Doctype文档类型学习小结
Doctype历史学
随手打开一个HTML页面的源码的顶部,我们将看到诸如:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,这就是doctype。
“doctype身后有着悠久的历史——以及一种黑色艺术”。据说,IE5 for Mac的开发过程中,新版浏览器改进了许多对标准的支持,以至于一些旧的网页不能再正常呈现,即渲染结果与预期不相符合(旧页面是依照当时占统治地位的Netscape4和IE4的渲染行为而编写的)。微软针对此事的解决方案是:在开始渲染页面前,IE5/Mac首先检查"doctype",而当时老旧的网页通常根本没有doctype。因此,网页作者在用心的“标准模式”时,就必须在html最开头加上正确的doctype。
于是,由此方案引发了基本所有浏览器的渲染模式:Quirks模式和标准模式(Standards Mode)。
Quirks模式和标准模式(Standards Mode)
据了解,Quirks模式和标准模式的区别体现在盒子模型的解释上,盒子模型主要就是块级元素在页面渲染上都是块状的矩形区域,更详细的相关资料请参考网上资料。
总的说来,Quirks模式会采用一些不符合标准规范的方式去兼容老的旧的网页,以保证显示的正常。而标准模式则更多的尝试采用符合标准规范的方式渲染页面文档,参考Quirks模式与Standards模式。
以下是相关细节的引用,来自浏览器Quirksmode(怪异模式)与标准模式(再回顾下)
那么浏览器究竟该采用哪种模式渲染呢?这就引出的DTD,既是网页的头部声明,浏览器会通过识别DTD而采用相对应的渲染模式:
1. 浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析
4. 在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。
5. 可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。
6. 在ie6中,如果在doctype声明前有一个xml声明(比如:<?xml version=”1.0″ encoding=”iso-8859-1″?>),则采用quirks mode解析。这条规则在ie7中已经移除了。
Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上,这也是我们在js里要注意的地方。
什么是盒模式? 这是针对块级元素说的,说白了就是把块级元素想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。
在Standars mode中:
元素真正的宽度 = 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)
1. 内联元素 ,例如<a>|<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。
2. 内联元素(display: inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。
3. 浮动元素(无论左或者右浮动)边界不压缩 ,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
4. 如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0% ,因此不会被显示,此点在采取层布局的时候需特别注意。
5. 边界值可为负,其显示效果各浏览器可能不相同。
6. 填充值不可为负。
7. 边框默认的样式(border-style)为不显示(none)。
在js中如何判断当前浏览器正在以何种方式解析?
document对象有个属性compatMode ,它有两个值:
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
各浏览器的兼容性表,可以查看PPK的网站:
http://www.quirksmode.org/compatibility.html
参考文章:http://www.iteye.com/topic/241260
http://hi.baidu.com/sonan/blog/item/68c5394e395708c6d0c86a40.html
在看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属性上:
IE6 IE7 在怪异模式下 盒模型是一模一样的 即width=width
IE6 IE7 在标准模式下 盒模型也是一模一样的 即width=width+padding+border
看实验:http://bbs.blueidea.com/thread-2839403-1-1.html
在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声明呢?
原文转自:http://kino.iteye.com/blog/241260
如何进入Standards模式?
一般来讲浏览器是通过DTD来判断模式的;浏览器进入Standards模式的DTD有:HTML的strict.dtd和loose.dtd这两个DTD的简单区别是
strict去掉了许多表现的标签,有利于结构和表现的分离
loose会导致Firefox进入Almost Standards模式,在图片的处理上会有微小的差别
在IE6下,如果在DTD之前有任何字符都将导致其进入quirks模式
Quirks模式与Standards模式的区别
quirks和standards的区别很多都可以归为IE5和IE6的区别。
盒模型的高宽包含内补丁和边框
在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下,也会有这个问题
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
可设置百分比的高度
在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:
body{text-align:center};#{content:text-align:left}
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
许多CSS默认样式将不同
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
JavaScript中的区别
http://www.quirksmode.org/js/contents.html#general
css中的区别
http://www.quirksmode.org/css/quirksmode.html
参考
Table of measurements
MSDN
dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat,分别对应quirks mode和strict mode
void function(){
var mode=document.compat
if (mode=”BackCompat”)
alert(“当前以quirks mode的方式渲染页面”);
else if(mode=”CSS1Compat”)
alert(“当前已strict mode的方式渲染页面”);
else alert(“浏览器版本不支持compatMode”);
}()