What happens in Quirks Mode in web browsers?

Quirks Mode is a mode of operation of web browserssuch as Internet Explorer (IE), Firefox, and Opera.Basically, Quirks Mode (also called Compatibility Mode)means that a relatively modern browser in-ten-tio-nal-ly simulatesmany bugs in older brows-ers, es-pe-cial-lyIE 4 and IE 5.

Quirks Mode is triggered bydoctype sniffing, also known asdoctype switching.This means that the browser inspects the start of an HTML document tosee whether it con-tains a doctype declaration asre-quired by HTML specifications.

The purpose of Quirks Mode is to make old pagesto display as their author in-tend-ed. Old pages may have been writtento utilize known features of old browsers or at least to adapt to them.For more in-for-ma-tion about Quirks Mode in general, consult theQuirksMode.org site.

There is no authoritative specification of what happens in Quirks Mode.After all, the mode is, by essence, an inten-tional violation ofCSS and HTML specifications.However, since authors may need adescription of what may actually happen in Quirks Mode,I have com-posed this document. (Browser vendors do not generally document Quirks Mode. Thereare some descriptions, such asThe effects of quirks mode emulation about IE, by Microsoft,but such descriptions cover some aspects only.)

If you have an existing pagethat seems to work well but lacksa doctype dec-la-ra-tion (required by HTML specifications)at the beginning, you should not simply put such a dec-la-ra-tion there.The reason is that the dec-la-ra-tion makes browsers work in the so-calledStandards Mode as opposite to Quirks Mode. This may mean just about anything.I have seen the entire content of a page disappear when you adda doctype dec-la-ra-tion. More often, the layout changes in rather un-ex-pect-ed ways. Well, the ways are not thatun-ex-pect-ed if you knowwhat may happen in Quirks Mode.

Before adding a doctype dec-la-ra-tion,you should check both the HTML and CSS code for syntactic correctnessby using validators and checkers. This may not be enough, since the pagemight still have been written re-ly-ing on things that just “work”—in Quirks Mode. Thus, you should testthe page at least on IE 7 and Firefox 2 inStandards Mode, i.e. after adding a doctype dec-la-ra-tion.If the page doesn’t work then, the following list might beuseful for spotting the problem.

When creating a a new page, you need not know aboutQuirks Mode and should usually not think about it. Simply write ac-cord-ingto HTML and CSS specifications; this includes usinga doctype dec-la-ra-tion that puts mod-ern browsers intoStandards Mode.More-over, put the doctype dec-la-ra-tion at the very start,since some browsers go to Quirks Mode, if there is anything(even a comment) before it.(This causes trouble if you are using XHTML, but in most cases,you shouldn’t useXHTML for web pages anyway, for the time being.)

But if you decide to use some features that might onlywork in Quirks Mode, such as a height="100%" attribute fora table element, you should check the list for other possibleimplications.

In Quirks Mode, browsers have been observed to behave in the followingways, though not all browsers exhibit all of these features:

The box model is incorrect (different from CSSspec-i-fi-ca-tions, though perhaps intuitively more natural).This means that the widthand height properties specify thedimen-sions of the entire element box, includingpadding and border, and not just the element’s content.(There is a demo later in this document.)
Dimensions of non-replaced inline elements(e.g., span elements by default) are affected bywidth andheight properties (while by CSS specifications,they shall be ignored).
Percentage heights for elements(e.g., <table height="100%"> in HTMLor table { height: 100% } in CSS)are applied, using the available height as reference,even when the enclosing block has height: auto(the default). In Standards Mode, the height is determinedby the require-ments of the content; but percentage heightswork when the enclosing block has its height set toa specific value.
Textarea widths are calculated differently.E.g., on IE 9, cols=5 makes the area 5 characters widein Standards Mode but only 4 characters wide in Quirks Mode.
Overflow is treated by expanding a box.When the content of an element does not fit into the dimensionsspecified for it (explicitly or implicitly), thenoverflow: visible (the default) means that the contentoverflows while the box dimensions are as specified. In Quirks Mode,the dimensions change; this can easily been seen e.g. if the boxhas a back-ground color or a border.
The root element is the body elementon IE in Quirks Mode. By the specifications, it isthe html element. For example, setting a margin or width forbody has no effect in Quirks Mode. As another example,IE has a vertical scrollbar by default, though it is inactive (dim)when there is nothing to scroll, and you can remove it (when it is not needed)in Quirks Mode by settingbody { overflow: auto; }, but in Standards Mode, you need to addhtml { overflow: auto; } as well.
A gray 2px page border appears by default on some versions of IE. It can in some cases be changed or removed by setting the border property of thehtml element (e.g., html { border: 0; }).
The id attribute valuesare matched case-insensitively, so that e.g. the CSS selector#foo matches an element with id="Foo".By the specifications, the match must be case-sensitive:#foo matches only an element with id="foo".
Padding for an image is ignoredwhen set in CSS for an img element or aninput type="image" element.
Default horizontal margin for a floated image is three pixels (instead of zero). That is, if the imgelement has the attributealign="left"oralign="right"or if the CSS rulefloat: left orfloat: rightapplies to it, the browser behaves as if the img element had the attribute hspace="3"(or its margin-leftand margin-right propertieshad the value 3px). This applies to IE; on other browsers, Quirks Modemay cause the extra margin on one side of the image only, and its widthcan be 2 pixels instead of 3.
Vertical alignment of an image is under certain conditionsto the bottom of the enclosing box, not to the baseline of text.This happens when the image is the only content within an element,typically a table cell.This means that e.g. an image in a table cell is by defaultat the bottom of the cell in Quirks Mode (which is often what the authorwants), whereas in Standards Mode there is a few pixels spacing belowthe image (unless one sets e.g.vertical-align: bottom for the img element).
Text rendering on IE 9 does not use severalnew features in the browser, when in Quirks Mode.This may e.g. make the width needed by some text different in differentmodes, thereby affecting the division of text into lines. See Microsoft’sAbout Text Rendering in Windows Internet Explorer 9.
Centering a block in CSS using e.g.margin: 0 auto does not work.Note: On IE up to IE 7, settingalign="center" in HTMLor text-align: center in CSSfor a div incorrectlycenters any inner block element as a whole,even in Standards Mode. On IE 8, this happens in Quirks Mode only,
Font properties are not inherited frombody or other enclosing elements into tables.This happens especially forfont-size but may happen forfont face, color, and line height as well.For example, if you setbody { font-family: Arial },it is possible that the font in table cells remains the browser default.
In a font size settingfor a table cell, a percentage value is interpreted as relativeto the browser’s basic font size, not to the font size thatapplies to the enclosing element (the table row) by CSS specifications.
Font size keywords are interpreted incorrectly sothat medium is larger than the browser’s basic font sizeand small equals that basic font size. Similarly, the entirescale of keywords,xx-small, x-small,small, large,x-large, xx-largeis interpreted systematically wrong: each value is interpreted asone step larger than it should.
Font rendering is different on IE 9. In Standards Mode,it applies more advanced technologies. This causes small difference that maymatter, affecting the width of text among other things. SeeAbout Text Rendering in Windows Internet Explorer 9.
Border width keywords thin,medium, and thick have different meanings on IE.For example, thin is 1px in Standards Mode, 2px inQuirks Mode.
The bordercolor attribute,which is nonstandard but widely supported, is treateddifferently in Quirks Mode vs. Standards mode by IE.The colors appear differently, though this seems to be causedby an effect on border style.
Radio buttons and checkboxeshave total dimensions 20 by 20 pixels in IE in Quirks Mode,as opposite to 13 by 13 in Standards Mode and in other browsers.The size of the graphic button or box is the same, but the spacing around itis different. It is an integral part of the element rendering, not affected bypadding or marginproperties, but affected bywidth and heightproperties.
Malformed property values are ofteninterpreted on the basis of guesswork, e.g.margin: 10 asmargin: 10px andcolor: ffffffascolor: #ffffff. This violates mandatory error processingrules in CSS: a rule using syntactically incorrect value shall be ignored.
Incorrect property values that are not recognizedby a browser may cause an earlier setting for the property to be ignored.For example, setting h1 { color: red; color: nonsense; }may cause the entire rule to be ignored; by the specifications, thecorrect setting color: red shall prevail.Such duplicate settings are often used in an attempt toprovide a fallback when using advanced CSS values, and thisoften fails in Quirks Mode, because the fallback gets ignored.The problem only appears within a CSS rule, so dividinga rule into two parts would help.For example, insteadof h1 { color: #ccc; color: rgba(255, 255, 255, 0.7); }you would useh1 { color: #ccc; }h1 { color: rgba(255, 255, 255, 0.7); }
Case of letters is treated as insignificantin class and identifier selectors in CSS. Thus, the selector .foomatches an element with class="Foo"orclass="FOO". By CSS specifications, the case is significantin these contexts.
Malformed names are accepted in class and identifierselectors. Specifically, names starting with a period or a number sign(e.g. in selectors .123a and #42)are accepted.
The declaration white-space: preis ignored.
Fixed positioning is not supported: the declarationposition: fixedis treated asposition: static (on IE 7).
Many standard (CSS 2.1) additions to CSS support (such as the max-width propertyand attribute selectors) in IE 7 are not in useQuirks Mode. That is, there are many CSS features thatwere not supported in IE 6 and are supported in IE 7, but onlyin Standards Mode. See Microsoft’s blog entryDetails on our CSS changes for IE7.
Some nonstandard CSS features(features not in CSS 2.1) such as scrollbar propertiesare recognized by some versions of IE and Opera in Quirks Mode but ignoredin Standards Mode. On IE 8 and newer, this also applies to theexpression()construct.
Setting rowspan=0 orcolspan=0 is ignored in many browsers, evenif they support these settings in Standards Mode.(They mean that the cell spans the rest of the row or column.This was implemented in browsers relatively lately.)
Tag soup parsing. For example,if a document contains the markup
<p>text<table>...</table>
then e.g. Firefox treats, in Quirks Mode, the pelement as containing the table element. In Standards Mode,the start tag of table implicitly closes the openp element.The difference can be seen if you e.g. set a border onthe p element.Similarly, for example,Firefox accepts a ul element inside a font.IE always works by wrong rules in such issues, even in Standards Mode,but standards-conforming behavior can be achieved by using valid markup andalways using explicit end tags like </p> even whenthey are formally optional.
White space between elements can besignificant.For example, let’s say you have a list of links.Typically you would writethe markup with line breaks between the list items, theli elements(that is, between </li>and <li> tags):
```
<ul><li><a ...>...</a></li><li><a ...>...</a></li>...</ul>
```
However, if you setdisplay: blockand a border for the link elements, you may wind upwith vertical gaps (empty lines) between the boxes.This happenson IE 7 in Quirks Mode, and always on previous versions of IE.On the other hand, for the markup above,if you set display: inline for the li elements,then there is no white space between the element boxes on IE in Quirks Mode.In Standards Mode, and on other browsers, there is white space correspondingto one blank, and this is regarded as standards-conforming by some.
Forms have a default bottom marginof 1em in Mozilla browsers. (On IE, there is such a margin in both modes.)This is apparently meant to continue the tradition of web browsersto leave that much spacing below a form.It used to be a frequently asked question how to get rid of the empty line after a form.
Default vertical marginsare suppressed in some contexts, e.g. when a p elementappears as the first element in a td element.This is more or less traditional behavior in browsers and takes placeon IE 7 in both modes (on IE 8, in Quirks Mode only).The issue does not arise if the relevant elements have their verticalmargins set explicitly in CSS.
Tooltip effects forimg elements are based onalt attributes on some old-style browsers,including IE 8 in Quirks Mode but not in Standards Mode.
The wbr markup for a linebreaking opportunity is honored. Browsers have widely supported it,but IE 8 has stopped doing so in “standards mode.”This is bad news, since <wbr> tags have been the onlyeffective way to suggest line break opportunitiesfor otherwise unbreakable strings on web pages.(Worse still, IE 9 seems to refuse to recognize it in any mode.)
Mozilla browsers (like Firefoxand Seamonkey) have some additional features, documented inthe quirk.css file. For example, the default colorfor table borders is gray (as in most other browsers), as opposite to usingthe foreground color of the tableas in Standards Mode. Note: Not all the settingsin that file apply to all versions of Mozilla.
Some DOM features are not available.For example, in Quirks Mode, IE 9 does not recognizethe getElementsByClassName method (which is well supportedby other browsers and included in HTML5 drafts).
The so-callednamed access on the Window objectsuch as using (in JavaScript) window.foo,window['foo'] or just foo to refer tothe element with id="foo"is possible in Quirks Mode only in some versions of Firefox. (In version 15,it however restored support to this legacy feature in both modes.)

The list is most probably not exhaustive. It relates mainly to IE 7.Other browsers may have a Quirks Mode that does simulate old versions of IEto the same extent.

Simple demo

The following simple images demonstrate one of themany differences between Quirks Mode and Standards Mode onInternet Explorer,namely the box model.They are presentations of the following markup in thetwo modes:
<div style="border: solid 2px #006; width: 8em; padding: 0 2em">stuff</div>

(Quirks Mode)

(Standards Mode)

Here is the element as presented by your current browser, for aquick check:

stuff

The explanation is that in Quirks Mode, the widthproperty is (incorrectly) taken as specifying the total width of theelement’s box, 8em in this case. In Standards Mode, it specifiesthe width of the content of the element, so that the total widthof the box 12em (plus the widths of the borders). That is, the total widthcon-tains the left and right padding, each set to 2em.

On Firefox, the correct box model is applied in both modes.However, you can still simulate the incorrect box model usedby IE in Quirks Model, by using the commandCSS/Use Border Box Model inWebDeveloper Extension (which is a great tool in any CSS-related issue).

An IE bug triggered end tag omission in “Standards Mode”

A paragraph with no end tag </p>.

Rendering on IE 7 in“Standards Mode”:

On IE 7, if a form element is preceded bya p element (a paragraph),omitting the optional end tag </p>may mess up some features of styling. If the form has a background set for it,the background may appear as a thin hor-i-zon-tal stripe only, on the top.If the form has a border set for it, it may be drawn incorrectly,excluding some part of the form.There is a simple separate test page for this IE 7 bug. This bug has been observed on Opera, too.Whether the bug is triggered seems to depend on how the content of theform starts, in terms of markup.

This bug does not existin previous versions of IE.

Presumably, this bug is connected with the fake “XHTML orientation” in IE 7. This browser version, despite actuallynot supporting XHTML, imposes some XHTML-like restrictionson (non-XHTML) HTML documents! In XHTML, the end tag </p>is not optional. Another bug of this kind is that some validentity references like &Omega are not interpretedproperly but displayed literally by IE, since they lack the terminatingsemicolon, which is always required in XHTML. (This bug appears in bothStandards Mode and in Quirks Mode.)

In IE 8 and IE 9, this bug still exists, in different manifestations.When viewing the test pagein Stan-dards Mode, IE 8shows a bordered thin yellow stripe as if there were an extra empty formbefore the real form.IE 9 does the same but displays the real form without background color andwithout border.

The conclusion is that the old recommendation touse explicit end tags is very sound. Throughout the history of HTML,various browsers have failed to infer the closing tags properly, andthere is probably no end to this madness.

Checking the mode

To check which mode (Quirks vs. Standards) a browser is in,

On Firefox, use the command View/Page Info (and see the General pane);or if you have WebDeveloper Extension, just check an icon in its toolbar (third icon from the right).
For IE, typejavascript:alert(document.compatMode)in the address bar, and check whetherthe popup window then saysCSS1Compat(indicating Standards Mode)orBackCompat(indicating Quirks Mode);alternatively,download and install the simpleQuirks or Standards Mode Bookmarklet.

IE 8 “compatibility mode” is different

IE 8 has a “compatibility mode” icon in its addressbar in many situations.The icon appears on the right of the address (URL) of the page being visited and it looks like a torn-down sheet of paper.

The meaning and use of this icon, as well as the compatibility mode selection in the Page menu of IE 8, is obscure.According to tooltip and help texts, clicking on the icon toggles between compatibility mode and normal mode.However, contrary to what we might expect, this is not at all thesame as switching between Quirks Mode and Standards Mode.Some features of rendering may be affected, but crucial issuessuch as box model are unaffected; they are based on thedoctype declaration.When it causes Standards Mode, the “compatibility mode” means that IE 8 emulates IE 7 in someissues. In Quirks Mode,“compatibility mode” means emulating IE 5, more or less,See Microsoft’s complicated explanation of this featureand their pageDefining Document Compatibility.

IE 9: more confusion

IE 9 has seven different rendering modes, with differentintermediate modes between Quirks Mode and Standards Mode.Using a correct DOCTYPE does not guarantee Standards Mode;for various reasons, a page may still be rendered in a manner that simulatesIE 7 – though this isn’t nearly as bad as Quirks Mode.CheckHenri Sivonen’s pageActivating Browser Modes with Doctype for the whole story.

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。