立诚勿怠,格物致知
It's all about connecting the dots

怪异模式与标准模式

很久以前,网页基本上可以说是分两种,一种是针对网景浏览器(Netscape Navagator)而写的,一种是针对微软IE浏览器而写的。当W3C开始制定web标准后,这些浏览器厂商不可能立即采用这些标准,因为这会影响当时网络上存在的大量网页。为此,浏览器厂商决定引入两种模式来有针对性地解析网页。

现在网页浏览器的布局引擎(layout engine)中使用了3中模式:怪异模式(quirks mode)、准标准模式(almost standards mode)和完全标准模式(full standards mode)。在怪异模式下,浏览器会模拟网景4(Navigator 4)和IE5浏览器的非标准行为来解析网页——这是很有必要的,因为需要支持那些在网络标准被广泛采纳之前就已经存在的网站。在完全标准模式下,浏览器会按照HTML和CSS标准来解析网页(但愿如此-_-)。在准标准模式下,浏览器的解析行为已经比较标准了,但是还是会有一小部分的怪异行为。

浏览器如何决定使用何种模式来解析网页

对HTML文档而言,浏览器会根据文件头部的DOCTYPE文档类型声明来判断是采用怪异模式还是标准模式来解析网页。为确保浏览器会使用完全标准模式来解析你的网页,请确保你的网页头部有类似下面这样的DOCTYPE文档类型声明:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

上例中的DOCTYPE声明(<!DOCTYPE html>)可能是最简答的文档类型声明了,而且也是HTML5标准推荐的文档类型声明。更早的HTML标准推荐的是其他的文档类型。但是所有现世的浏览器(包括很老的IE6)都会使用完全标准模式来解析这种文档类型声明的html文件,所以使用其他的(同时书写上也更复杂的)DOCTYPE文档类型声明是毫无理由的。如果你使用其他的DOCTYPE文档类型声明,你可能一不小心就写了一个触发了准标准模式或怪异模式的DOCTYPE文档类型了。

请务必确保将DOCTYPE文档声明写于文档的最头部——任何出现在DOCTYPE文档类型声明之前的内容(比如注释、xml声明)都会在IE9及更早的IE浏览器中触发怪异模式。

在HTML5标准里,DOCTYPE文档类型声明的唯一目的就是激活完全标准模式。在更早的HTML标准里,DOCTYPE文档类型声明被赋予了一些其他含义,但是从没有哪个浏览器会把DOCTYPE用于判断是使用怪异模式还是标准模式之外的其他用途。

XHTML

这里应该敲下黑板。如果你的服务器在HTTP响应头的Content-Type里使用application/xhtml+xml 这个MIME类型来将你的网页声明为XHTML的话,你不再需要通过声明一个DOCTYPE来激活标准模式,因为这类文件总是会被浏览器按完全标准模式进行解析。但是需要注意的是,使用application/xhtml+xml 这个MIME类型的话,IE8浏览器会出现下载对话框而不是显示对应的网页,因为IE8不认识这个文档格式——第一个支持XHTML格式的IE浏览器是IE9。

如果你使用text/html 这个MIME类型来返回类XHTML文件的话,浏览器会按照HTML文件来对待这些网页,这时候你就需要显示地进行DOCTYPE文档类型声明来触发标准模式了。

如何知道当前使用的模式

火狐浏览器中,可通过在上下文菜单里选择“查看页面信息”查看“渲染模式”。

IE浏览器中,可通过按F12查看“文档模式”。

这些模式间的区别是什么

详见怪异行为清单准标准模式

参考资料:

https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

 

赞(0) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《怪异模式与标准模式》
文章链接:https://www.orzzone.com/quirks-mode-and-standards-mode.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册