怪异模式和严格模式(译注:通常称为标准模式:Standards Mode,下文中的严格模式均可以理解为标准模式)是浏览器解析CSS时的两种‘模式’。这篇文章将简单阐述这两种模式之间的差别。html
译注:一个网页通常由两部分组成即:HTML(Hypertext Markup Language)和CSS(Cascade Style Sheets)。
HTML负责描述网页的结构和内容(如标题,导航栏等),而CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。浏览器
当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并无遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能彻底正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),可是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。并发
为了保证本身的网站在不一样的浏览器中都能正确展示,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。所以大部分网站的CSS实现并未符合W3C的标准。字体
然而随着标准一致性变得愈来愈重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。可是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。若是浏览器忽然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。网站
所以当即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。htm
任何的解决方案必须跟随以下两个方面:blog
1:容许网站开发者可以选择他们所熟知的模式。图片
2:依然使用旧式规则显示陈旧的网站。开发
换句话说,全部的浏览器须要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最早实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。文档
选择使用哪一种模式须要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准,任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示(X)HTML文档中容许有什么,不容许有什么,DOCTYPE正是用来告诉浏览器使用哪一种DTD,通常放在(X)HTML文档开头声明)用以告诉其余人这个文档的类型风格
1:产生于标准化浪潮之前的网页并无DOCTYPE声明。所以'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。
2:相反,若是开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么作。所以大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。
3:任何新的或未知的DOCTYPE将触发严格模式。
4:一些页面依据怪异模式而写,可是却包含DOCTYPE。这种状况下各个浏览器依据本身的DOCTYPE规则列表来触发怪异模式,参照这个浏览器比较图表 。
注意:你的网页并不必定要依据所选择的DOCTYPE去得到有效性验证,一个DOCTYPE标签足以触发严格模式。
我在大部分网页中使用以下的DOCTYPE。它除了声明个人网页是XHTML 1.0 过渡类型以外,还将在全部浏览器中触发“准严格模式”(译注:下文将介绍这个模式)
就我的而言,我并不十分满意“DOCTYPE切换”方案。一个DOCTYPE所提供的信息是(X)HTML文档所拥有的类型风格,即文档的结构,而不该该提供任何关于文档表现(外观)的信息,由于那违反了CSS关于页面结构和表现分离的原则。
在早些时候,尝试使用严格模式老是会产生关于图片会忽然得到旧式的底部边距,而且没法移除的讨论。产生这个现象的缘由是严格模式将标签当成行内元素,这意味着一些空间将被保留给一些拥有”尾部“的字符如(g, j, q),而图片并无“尾部”字符,因此这些空间将不会被使用,可是却依旧保留着。
解决办法是声明图片为块级元素{display:block}
浏览器厂商,尤为是Mozilla,认为这是一种产生困惑的状况,因而他们引入了“准严格模式”(译注:也称为准标准模式 Almost Standards Mode),这与严格模式同样,除了它将图片看成块级元素而不是行内元素。
在Windows平台的IE6 浏览器中,微软实现了一个额外的规则:若是DOCTYPE声明在XML声明以后,将触发怪异模式。这样作是为了容许开发者在怪异模式下得到“有效的网页” (须要DOCTYPE)。下面是XML声明,你须要将它放在页面的开头,在DOCTYPE以前。
注意这种行为已经从IE7 中移除。
译注:Peter-Paul Koch在这篇文章后面列出了怪异模式和严格模式在不一样浏览器中的一些重要表现,建议了解一下。
原文连接:http://blog.sina.com.cn/s/blog_5d9101fd0100jr8q.html