Quirks mode refers to a technique used by some web browsers for the sake of maintaining backwards compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.
Overview
The structure and appearance of a web page are described by a combination of two standardized languages: HTML, a markup language designed for web use, which describes the structure and content of the page, and CSS, a generalized stylesheet language, which specifies how the page should be rendered in various media (visual styles for screen display, print styles to use when printing the page, aural styles to use when the page is read aloud by a screen reader, etc.). However, most older web browsers either did not fully implement the specifications for these languages or were developed prior to the finalization of the specifications (Microsoft Internet Explorer version 5.1 for the Macintosh platform, released in 2001, was the first major web browser with full support for CSS Level 1, for example). As a result, many older web pages were constructed to rely upon the older browsers' incomplete or incorrect implementations, and will only render as intended when handled by such a browser.
Support for standardized HTML and CSS in major web browsers has improved significantly, but the large body of legacy documents which rely on the quirks of older browsers represents an obstacle for browser developers, who wish to improve their support for standardized HTML and CSS, but also wish to maintain backward compatibility with older, non-standardized pages. Additionally, many new web pages continue to be created in the older fashion, since the compatibility workarounds introduced by browser developers mean that an understanding of standardized methods is not strictly necessary.
To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes: in "standards mode" pages are rendered according to the HTML and CSS specifications, while in "quirks mode" attempts are made to emulate the behavior of older browsers. Some browsers (those based on Mozilla's Gecko rendering engine, for example) also use an "almost standards" mode which attempts to compromise between the two, implementing one quirk for table cell sizing while otherwise conforming to the specifications.
Comparison of document types
Henri Sivonen compiled a list of various document types and how they are treated in the most common browsers, showing whether pages are rendered in Quirks, Standards, or Almost standards mode. The criterion used for "Almost standards mode" is non-standard table cell height rendering.
Doctype
NS6
Gecko pre-1.0.1
Gecko 1.0.1+ & Safari
Opera 9
Opera 7.5
IE 7 & Opera 7.10
IE 6 & Opera 7.0
IE Mac
Konq 3.2
| None |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
HTML 3.2 doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
|
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
HTML 4.0 Strict doctype without system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
S |
S |
S |
S |
S |
A |
A |
A |
A |
HTML 4.01 Strict doctype without system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
S |
S |
S |
S |
S |
A |
A |
Q |
A |
HTML 4.0 Strict doctype with system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
S |
S |
S |
S |
S |
A |
A |
A |
A |
HTML 4.01 Strict doctype with system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
S |
S |
S |
S |
S |
A |
A |
A |
A |
HTML 4.0 Transitional doctype without system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
HTML 4.01 Transitional doctype without system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
HTML 4.01 Transitional doctype with system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
S |
S |
A |
A |
A |
A |
A |
A |
Q |
HTML 4.01 Transitional doctype with system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
|
Q |
S |
A |
A |
A |
A |
A |
A |
Q |
HTML 4.0 Transitional doctype with system identifier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
Q |
Q |
Q |
Q |
A |
A |
A |
A |
Q |
XHTML 1.0 Strict doctype without an XML declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
S |
S |
S |
S |
S |
A |
A |
A |
A |
XHTML 1.0 Transitional doctype without an XML declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
S |
S |
A |
A |
A |
A |
A |
A |
Q |
XHTML 1.0 Strict doctype with an XML declaration
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
S |
S |
S |
S |
S |
A |
Q |
A |
Q |
XHTML 1.0 Transitional doctype with an XML declaration
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
S |
S |
A |
A |
A |
A |
Q |
A |
Q |
ISO HTML 2000 version doctype, short form
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
|
Q |
S |
S |
Q |
Q |
Q |
Q |
Q |
Q |
ISO HTML 2000 version doctype, long form
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">
|
Q |
S |
S |
S |
S |
A |
A |
A |
Q |
ISO HTML 1999 version doctype, short form
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN">
|
S |
S |
S |
Q |
Q |
Q |
Q |
Q |
Q |
ISO HTML 1999 version doctype, long form
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN">
|
S |
S |
S |
S |
S |
A |
A |
A |
Q |
HTML5
<!DOCTYPE html>
|
Q |
S |
S |
S |
S |
A |
A |
A |
|
Doctype
NS6
Gecko pre-1.0.1
Gecko 1.0.1+ & Safari
Opera 9
Opera 7.5
IE 7 & Opera 7.10
IE 6 & Opera 7.0
IE Mac
Konq 3.2
Mode differences and examples
One prominent difference between quirks and standards modes is the handling of the CSS Internet Explorer box model bug. Before version 6, Internet Explorer used an algorithm for determining the width of an element's box which conflicted with the algorithm detailed in the CSS specification, and due to Internet Explorer's popularity many pages were created which relied upon this incorrect algorithm. As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in standards mode and uses the previous, non-standard algorithm when rendering in quirks mode.
Another notable difference is the vertical alignment of certain types of inline content; many older browsers aligned images to the bottom border of their containing box, although the CSS specification requires that they be aligned to the baseline of the text within the box. In standards mode, Gecko-based browsers will align to the baseline, and in quirks mode they will align to the bottom.
Additionally, many older browsers did not implement inheritance of font styles within tables; as a result, font styles had to be specified once for the document as a whole, and again for the table, even though the CSS specification requires that font styling be inherited into the table. If the font sizes are specified using relative units, a standards-compliant browser would inherit the base font size, then apply the relative font size within the table: for example, a page which declared a base font size of 80% and a table font size of 80% (to ensure a size of 80% in browsers which do not properly inherit font sizes) would, in a standards-compliant browser, display tables with a font size of 64% (80% of 80%). As a result, browsers typically do not inherit font sizes into tables in quirks mode.
Almost standards mode
Gecko-based browsers since 1.0.1 (such as Firefox), Safari and Opera 7.5 (and later) have a third compatibility mode known as "almost standards mode", which maintains the "traditional" vertical sizing of table cells, against the CSS2 specification. This effectively makes their implementation closer to Internet Explorer's standards mode.
"Almost standards" rendering mode is exactly the same as "standards" mode in all details save one: the layout of images inside table cells is handled as they are in Gecko's "quirks" mode, which is fairly consistent with other browsers, such as Internet Explorer. This means that sliced-images-in-tables layouts are less likely to fall apart in Gecko-based browsers based on the rendering engine found in Mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.
Triggering different rendering modes
Most often, browsers determine which rendering mode to use based on the presence of a Document Type Declaration in the page; if a full DOCTYPE is present the browser will use standards mode, and if it is absent the browser will use quirks mode. For example, a web page which began with the following DOCTYPE would trigger standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
While this DOCTYPE (which does not contain either the version of HTML in use, or the URL of an HTML Document Type Definition) would trigger quirks mode:
<!DOCTYPE html PUBLIC>
Additionally, a web page which does not include a DOCTYPE at all will render in quirks mode.
One notable exception to this is Microsoft's Internet Explorer 6 browser, which will render a page in quirks mode if the DOCTYPE is preceded by an XML prolog, regardless of whether a full DOCTYPE is specified. Thus an XHTML page which begins with the following code would be rendered in quirks mode by IE 6:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Quirks mode in IE 6 will also be triggered if anything but whitespace precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, quirks mode will be triggered in IE 6:
<!-- This comment will put IE 6 in quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
The above is useful to an extent as it can be used to trigger quirks mode in IE 6, but no other browsers.
Microsoft's Chris Wilson has indicated that the problem with the XML declaration would be fixed in version 7 of Internet Explorer, in which the XML prolog will simply be ignored, but for maximum compatibility with existing and older web browsers the World Wide Web Consortium, which maintains the XHTML specification, recommends that authors of XHTML documents omit the XML declaration when possible. It can however be forced into quirks mode by including a comment before the DOCTYPE declaration like so:
<!--quirks mode for ie7--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Mode verification
In most recent browsers, the Document Object Model property document.compatMode indicates the rendering mode for the current page—in standards mode, document.compatMode contains the value 'CSS1Compat', while in quirks mode it contains the value 'BackCompat'.
Additionally, in Mozilla Firefox and Opera the rendering mode in use for a given page is indicated on the 'Page info' informational box.
相关推荐
统一模式的WebKit浏览器渲染引擎的利弊.docx
1.2 浏览器发送 HTTP 请求的流程（B/S模式）（注意：http协议是基于tcp/ip协议的，http协议是应用层协议，tcp/ip协议是通信层协议，也就是tcp提供的是通信的管道。） 简要来说，很多网站第二次访问能够秒开，是因为...
基于python的ghost浏览器渲染模式爬虫工具。python执行js的首选工具，
以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址...
让易语言的浏览器用ie9的浏览模式渲染
例如网址的安全漏洞修正：右键单击关闭页面的问题修正：IE10渲染模式失败的问题改善：自动填表时网址的识别改善：复杂网址的判断1.修正启动时判断上网状态造成浏览器死机的问题2.修正about:开头网址可能被利用在...
对于同时开启数十个页面，CPU占用率高的情况，几米浏览器提供了性能优化模式，开启此模式后，CPU占用率可瞬间降低并维持到打开一个单页面的水准，此模式对于网络浏览用户不存在兼容性问题。 屏幕截图 可以以图片...
实现原理：H5调用系统媒体设备》选择前置摄像头》捕获视频流》渲染到视频播放器》定时抓取视频截图》渲染到canvas》转换为图片流》使用图像识别库对图片流进行二维码识别 优势： 1.基于浏览器实现，轻便且维护方便...
crawlergo是一个使用chrome headless模式进行URL收集的浏览器爬虫。它对整个网页的关键位置与DOM渲染阶段进行HOOK，自动进行表单填充并提交，配合智能的JS事件触发，尽可能的收集网站暴露出的入口。内置URL去重模块...
高速内核也迎来较大升级，高速内核性能进一步增强，渲染能力、网页标准兼容性都有了大幅提升。 2. 皮肤：浏览器默认皮肤全新改版，界面更清爽、更现代。 3. 安装界面：重新设计了安装程序，安装界面简约时尚，并可一...
这一串东西就是告诉浏览器你要用何种模式来渲染页面，说白了就是让浏览器用何种标准的CSS进行页面布局。 有三种模式供你选择： 标准模式（Standards Mode） 准标准模式（Almost Standards Mode） 怪癖模式...
由于Web 端的远程加载受到浏览器的 CORS 跨域策略限制，如果对方服务器禁止跨域访问，那么会加载失败，而且在 WebGL 渲染模式下，即便对方服务器允许 http 请求成功之后也无法渲染，这是 WebGL 的安全策略的限制 ...
改进：闪游崩溃提示中添加操作系统版本、IE版本、渲染模式 改进：收藏管理器打开后默认显示所有收藏 改进：退出提示对话框添加提示图标，显示更加人性化 修正：同步后的新收藏文件无法覆盖旧收藏问题 修正：部分...
首创BIPS浏览器安全体系，用户至上的敢赔模式； 极速：双核设计，创新智能切换引擎；对Chrome内核超过100项改进； 炫酷：猎豹与世界顶级设计团队Rigo Design携手，致力于为您提供极致的浏览体验；100多处元素优化，...
浏览器是重要的互联网入口，一旦受到漏洞攻击，将直接影响到用户的信息安全。作为攻击者有哪些攻击思路，作为用户有哪些应对手段？在本书中我们将给出解答，带你了解浏览器安全的方方面面。本书兼顾攻击者、研究者和...
包括网络同步，Wand密码管理、会话管理、鼠标手势、键盘快捷键、内置搜索引擎、智能弹出式广告拦截、网址的过滤、浏览器识别伪装和超过400种,可以方便下载更换的皮肤，界面也可以在定制模式下通过拖放随意更改。...
5.1.2 渲染属性和渲染模式 117 5.1.3 状态继承 118 5.1.4 渲染状态示例 119 5.2 纹理映射 121 5.2.1 二维纹理映射 123 5.2.2 二维纹理映射示例 126 5.2.3 多重纹理映射 129 5.2.4 多重纹理映射示例 ...