浏览器标准模式(standars mode)与怪异模式(Quirks mode)浅析

原创 2016年06月01日 10:56:50

标准模式与怪异模式产生原因

在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)。

W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。

火狐的始终表现的很一致,不种我们操心。重点是IE(6,7,8)标准模式与怪异模式差别很大,主要体现在对盒子模型的解释上。


渲染模式

浏览器会通过识别DTD(document type definition 文档类型定义)而采用相对应的渲染模式

  • 浏览器对没有doctype声明的网页采用quirks mode解析
  • 对于拥有doctype声明的网页,但浏览器不能识别的doctype声明,浏览器采用strict mode解析
  • 没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析
  • 在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的
  • 在ie6中,如果在doctype声明前有一个xml声明,则采用quirks mode解析。这条规则在ie7中已经移除了
微软的 Internet Explorer 6 浏览器,如果 DOCTYPE 之前有一个 XML 声明,不管是否指定完整的DOCTYPE,它就会以 quirks 模式渲染一个页面。因此以如下代码开始的 XHTML 页面会被 IE 6 渲染为 quirks 模式:

<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在一定程度上,上述代码是有用的,然而它仅仅会对 IE 6 触发怪异模式。

如果 DOCTYPE 之前有任何语句,quirks 模式在任何版本的 IE 中(截至 IE 9)同样会被触发。例如,如果一个超文本文件在 DOCTYPE 前包含一个注释或者任何标签,IE (截至 9) 会使用 quirks 模式:

<!-- This comment will put IE 6, 7, 8,and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XML 声明的问题在Internet Explorer 7 中被解决了,在此 XML 声明只是简单的被忽略。然而,为对现存和更早的网页浏览器的最大程度的兼容,万维网联盟,维持 XML 规范的组织,建议 XHTML文件的作者可以考虑省略XML 声明。

判断浏览器模式

js方法
   alert(window.top.document.compatMode)
   //BackCompat  怪异模式
   //CSS1Compat  标准模式

jquery方法
  alert($.boxModel)
  alert($.support.boxModel)

ie浏览器强制开启怪异模式(Quirks Mode)的解决方法

用户没有强制开启怪异模式可以用以下方法解决 1、Doctype 检测 并设置对于一个 HTML 页面,< !DOCTYP >声明位于其中最前面的位置,处于< html >标签之前,这个< !DOCTY...

quirks mode(怪异模式) 和 standard mode(标准模式)

出现的背景 在很久之前的浏览器,还是Netscape Navigator和 Microsoft Internet Explorer的时候,页面主要就是为这两个浏览器写的。但是到了今天了,firefo...

怪异模式(Quirks Mode)对 HTML 页面的影响

转载自:http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/#ibm-pcon 本文主要描述 Quirks Mode 和 Stan...

两种盒模型(浏览器的两种模式quirks mode 和strict mode)

要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。 所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是...
  • pxzsl
  • pxzsl
  • 2015年08月17日 11:09
  • 266

浏览器的两种模式quirks mode 和strict mode

在看js代码时,有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西,一直也没深究怎么回事,只是零零碎碎的有些概念,最近终于受不了这种似懂非懂的感觉,决定好好学习...

浏览器的两种模式quirks mode 和strict mode

在看js代码时,有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西,一直也没深究怎么回事,只是零零碎碎的有些概念,最近终于受不了这种似懂非懂的感觉,决定好好学习...

浏览器的两种模式quirks mode 和strict mode

【转】 http://www.cnblogs.com/jenry/archive/2013/01/05/2846530.html 在看js代码时,有时会看到关于quirks mode(怪异模式)和...

测试DOCTYPE在各种浏览器上的Quirks模式和标准模式

首先声明, 讨论这个问题本文不具备太大的现实意义, 就好比花大笔墨讨论用java1.1重写我们目前的项目会有哪些影响一样. 但是做web开发, 难免要接触它. 我各人觉得quirks模式翻译为怪异模式...

Apache httpd configuration for IE7 standard mode rendering in IE8(转)——360浏览器兼容模式无法正确展示网页

(Note: The following instructions are for information purpose only and correspond to Apache 2.2 on W...

doctype声明、浏览器的标准、怪异等模式

转载地址:http://www.fantxi.com/blog/archives/browser-mode/ 群里看到一个面试题,doctype 标准(严格)模式(Standards M...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浏览器标准模式(standars mode)与怪异模式(Quirks mode)浅析
举报原因:
原因补充:

(最多只允许输入30个字)