怪异模式和标准模式（严格模式）

2013-04-09 13:47 Barret李靖阅读(1392) 评论(0) 编辑收藏举报

要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP，最专业的PHP社区</h3>
    </body>
</html>

　　如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析，便是如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP，最专业的PHP社区</h3>
    </body>
</html>

　上面的代码，浏览器会按HTML 4.01的标准进行解析。

到底标准模式和怪异模式有什么不同呢？在我之前的文章《IE到底认不认识!important声明》中已经说过，标准模式中

IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。好像太绝对了，呵呵。好吧，要想写出跨浏览器CSS，你最好采用标准模式。

到底都有哪些声明呢？哪种声明更好呢？我们建议你使用XHTML 1.0最严格模式，从一开始我们就应该严格的要求自己

，具体声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

　如果你接手的是一个遗留网页，最初并没有DTD声明，并且使用了很多在XHTML中已经废除的标签，那么，我们建议你使用XHTML兼容模式，声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Quirks mode and strict mode [官网]

Further information can be found atJukka K. Korpela’s Quirks Mode features page.

Browser comparison: which doctype triggers which mode?

IE 5 Windows and Netscape 4: Doctype switching not possible; permanently locked in quirks mode.

IE 6 Windows: CSS Enhancements in Internet IE 6

IE 5 Mac: No official support page, but Eric Meyer has summarized the differences.

Mozilla: DOCTYPEs and list of quirks.

Opera 7: The Opera 7 DOCTYPE Switches

Safari: No official support page, but it largely follows Mozilla.

Quirks mode and strict mode are the two ’modes’ modern browsers can use to interpret your CSS. This page gives a short overview of the reasons for and the differences between these two modes.

The problem

When Netscape 4 and IE 4 implemented CSS, their support did not match the W3C standard (or, indeed, each other). Netscape 4 had horribly broken support. IE 4 came far closer to the standard, but didn’t implement it with complete correctness either. Although IE 5 Windows mended quite a lot of IE 4 bugs, it perpetuated other glitches in CSS (mainly the box model).

To make sure that their websites rendered correctly in the various browsers, web developers had to implement CSS according to the wishes of these browsers. Thus, most websites used CSS in ways that didn’t quite match the specifications.

Therefore, when standards compliancy became important browser vendors faced a tough choice. Moving closer to the W3C specifications was the way to go, but if they’d just change the CSS implementations to match the standards perfectly, many websites would break to a greater or lesser extent. Existing CSS would start to show odd side effects if it were suddenly interpreted in the correct way.

So moving closer to standards compliance would cause problems. On the other hand, not moving closer to standards compliance would perpetuate the general confusion of the Browser Wars Era.

Quirks-mode

Therefore any solution to this problem had to

allow web developers who knew their standards to choose which mode to use.
continue displaying old pages according to the old (quirks) rules.

In other words, all browsers needed two modes: quirks mode for the old rules, strict mode for the standard. IE Mac was the first browser to implement the two modes, and IE Windows 6, Mozilla, Safari, and Opera followed suit. IE 5 Windows, as well as older browsers like Netscape 4, are permanently locked in quirks mode.

Choosing which mode to use requires a trigger, and this trigger was found in ’doctype switching’. According to the standards, any (X)HTML document should have a doctype which tells the world at large which flavour of (X)HTML the document is using.

Old pages written before (or in spite of) the standardization wave don’t have a doctype. Therefore ’no doctype’ would mean quirks mode: show according to old rules.
Contrarily, if the web developer was savvy enough to include a doctype, he probably knew what he was doing. Therefore most doctypes trigger strict mode: show according to pure standards.
Any new or unknown doctype triggers strict mode.
The problem was that some pages written in quirks mode did have doctypes. Therefore each browser has its own list with doctypes that trigger quirks mode. See this browser comparison chart for an overview of these lists.

Note that your page does not have to validate according to the chosen doctype, the mere presence of the doctype tag is enough to trigger strict mode.

On this site I use this doctype in most pages. In addition to declaring my pages XHTML 1.0 Transitional, it also triggers almost strict mode in all browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Good solution?

Personally I’m not terribly happy with doctype switching. A doctype carries information about the flavour of (X)HTML you’re using, in other words, about document structure. In my opinion it shouldn’t carry any information about document presentation, because that violates the separation of structure and presentation that CSS is all about.

But the browser vendors were not to be denied: browser after browser implemented doctype switching, and nowadays all modern browsers support it.

Complication: almost strict mode

In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn’t be removed. The cause was that in strict mode <img /> is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still had to be reserved.

The solution was to explicitly declare images block level elements: img {display: block}.

Nonetheless browser vendors, Mozilla especially, thought this was such a confusing situation that they introduced "almost strict mode". This was defined as strict mode, but with images continuing to be blocks, and not inline elements.

Most common doctypes, including the one I use, trigger almost strict mode. The treatment of images is by far the most important difference between almost strict mode and really strict mode.

IE Windows special: the xml prolog

In IE 6 Windows, Microsoft implemented one extra rule: if a doctype that triggers strict mode is preceded by an xml prolog, the page shows in quirks mode. This was done to allow web developers to achieve valid pages (which require a doctype) but nonetheless stay in quirks mode.

This is the xml prolog. You should put it on the very first line of your document, before the doctype.

<?xml version="1.0" encoding="iso-8859-1"?>

Note that this behaviour has been removed from IE 7.

The differences

What, exactly, are the differences between the two modes? There are a few more differences that can trip up the unwary web developer. The table below summarizes a few of the most important ones.

IE Quirks Mode is IE5.5, by the way. IE6, 7 and 8 all switch back to 5.5 when they encounter a Quirks Mode page.

always	Always supports standard
never	Never supports standard
depends	Standards support depends on rendering mode; see text for details

See also the key to my compatibility tables.
Selector	IE 6	IE 7	IE8b2	FF 2	FF 3.0	FF 3.1b	Saf 3.0 Win	Saf 3.1 Win	iPhone 3G	Chrome 0.3	Opera 9.51	Opera 9.62	Konqueror 3.5.7
Box model Test page Quirks Test page Strict	depends			always			always			always	always		always
Box model Test page Quirks Test page Strict	Standard: There are two box models, the traditional and the W3C. Obviously, the W3C one, where the `width` excludes padding and borders, is the standard. In IE, the rendering mode decides which box model it follows. In quirks mode it uses the traditional model, in strict mode the W3C model. Doctype switching is the only way of selecting a box model in IE 6 Windows. Mozilla, Opera and IE Mac allow the use of the `box-sizing`declaration to select a box model, while Safari only supports the W3C box model. Exception: buttons elements always retain the traditional box model in IE Windows and Mozilla. Test page.
white-space: pre Test page Quirks Test page Strict	depends			always			always			always	always		always
white-space: pre Test page Quirks Test page Strict	Standard: `white-space: pre` always works. In IE Windows this declaration works only in strict mode.
margin and width: auto Test page Quirks Test page Strict	depends			always			always			always	always		always
margin and width: auto Test page Quirks Test page Strict	Standard: By giving an element any `width` and `margin: 0 auto` it’s possible to center it. In IE Windows this only works in strict mode.
Unitless values are ignored Test page Quirks Test page Strict	depends			depends			depends			depends	depends		depends
	Standard: CSS requires most values to have a unit. If such a value doesn’t have a unit it’s ignored. However, in quirks mode all browsers automatically append the unit `px` to unitless values.
Selector	IE 6	IE 7	IE8b2	FF 2	FF 3.0	FF 3.1b	Saf 3.0 Win	Saf 3.1 Win	iPhone 3G	Chrome 0.3	Opera 9.51	Opera 9.62	Konqueror 3.5.7
.test:hover Test page Quirks Test page Strict	untestable	depends		depends			always		untestable	always	always		always
.test:hover Test page Quirks Test page Strict	Standard: The `.test:hover` selector (without an element selector like `p.test:hover`) always works. It does not work in some browsers quirks mode.
img display Test page Quirks Test page Strict	never		depends	depends			depends			depends	depends		depends
img display Test page Quirks Test page Strict	Standard: An image has `display: inline` by default. Therefore it has a slight space below it, because the image is placed on the baseline of the text. Below the baseline there should be some more space for the descender characters like g, j or q. In quirks mode `img` has a default `display: block`, while in really strict mode it has a default `display: inline`. The offshoot is that in strict mode it’s not possible to make a container fit tightly around the image, unless, of course, you explicitly say `img {display: block}`. Note that the strict mode test page is in "really strict mode" instead of the "almost strict mode" I use on the rest of this site. See above for more information on almost strict mode.
overflow: visible Test page Quirks Test page Strict	never	depends		always			always			always	depends		always
overflow: visible Test page Quirks Test page Strict	Standard: When you give an element a fixed `height` and an `overflow: visible` (which is the default anyway), and the content is too long for the element, the content should flow out of the element. IE 6 always stretches up the element to accomodate all the content, regardless of rendering mode. In Opera and IE 7 this only happens in quirks mode.
width on inline elements Test page Quirks Test page Strict	depends			always			always			always	always		always
width on inline elements Test page Quirks Test page Strict	Standard: An inline element such as a `<span>` cannot have a `width`. In quirks mode, however, IE tries to honour a `width` by giving the element `display: inline-block`, which does allow a `width`declaration.
font sizes of table cells Test page Quirks Test page Strict	depends			depends			depends		?	depends	depends		depends
font sizes of table cells Test page Quirks Test page Strict	Standard: `td {font-size: 80%}` should mean that TDs get a font size of 80% of the `body` text. However, in quirks mode it means that TDs get a font size of 80% of the default browser font size (usually 16px). This is a really odd behaviour, because it’s based on a bug in Netscape 4 (!), and for some reason all browser vendors thought it necessary to perpetuate this bug. The iPhone in Quirks Mode seems to make the text slightly smaller than the normal body text, although the Strict Mode text is smaller still. I’m not sure how to interpret this.
Selector	IE 6	IE 7	IE8b2	FF 2	FF 3.0	FF 3.1b	Saf 3.0 Win	Saf 3.1 Win	iPhone 3G	Chrome 0.3	Opera 9.51	Opera 9.62	Konqueror 3.5.7

Further information can be found at Jukka K. Korpela’s Quirks Mode features page.

JustinYong [博客园]

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	Geckopre-1.0.1	Gecko 1.0.1+ &Safari	Opera9	Opera 7.5	IE 7 & Opera 7.10	IE 6 & Opera 7.0	IE Mac	Konq3.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	Geckopre-1.0.1	Gecko 1.0.1+ &Safari	Opera9	Opera 7.5	IE 7 & Opera 7.10	IE 6 & Opera 7.0	IE Mac	Konq3.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:

<!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:

<!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.

Reference [参考资料]

　　1.QuirksMode

　　2.JustinYong

刷新页面返回顶部

小胡子哥 (Barret Lee) console.log( " Hi, I'm Barret, a Web Developer, try to be Excellent~ " );