What happens in Quirks Mode?

Quirks Mode is a mode of operation of web browsers such 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 simulates many bugs in older brows­ers, es­pe­cial­ly IE 4 and IE 5.

Quirks Mode is triggered by doctype sniffing, also known as doctype switching. This means that the browser inspects the start of an HTML document to see whether it con­tains a doctype declaration as re­quired by HTML specifications.

The purpose of Quirks Mode is to make old pages to display as their author in­tend­ed. Old pages may have been written to 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 the QuirksMode.org site.

There is no authoritative specification of what happens in Quirks Mode. After all, the mode is, by essence, inten­tional violations of CSS and HTML specifications. However, since authors may need a description of what may actually happen in Quirks Mode, I have com­posed this document. (Browser vendors do not generally document Quirks Mode. There are some descriptions, such as The effects of quirks mode emulation about IE, by Microsoft, but such descriptions cover some aspects only.)

If you have an existing page that seems to work well but lacks a 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-called Standards Mode as opposite to Quirks Mode. This may mean just about anything. I have seen the entire content of a page disappear when you add a doctype dec­la­ra­tion. More often, the layout changes in rather un­ex­pect­ed ways. Well, the ways are not that un­ex­pect­ed if you know what may happen in Quirks Mode.

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

When creating a a new page, you need not know about Quirks Mode and should usually not think about it. Simply write ac­cord­ing to HTML and CSS specifications; this includes using a doctype dec­la­ra­tion that puts mod­ern browsers into Standards 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 use XHTML for web pages anyway, for the time being.)

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

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

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 IE to the same extent.

Simple demo

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

(A box with the text "stuff" inside, 134 pixels wide) (Quirks Mode)
(A box with the text "stuff" inside, 203 pixels wide) (Standards Mode)

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

stuff

The explanation is that in Quirks Mode, the width property is (incorrectly) taken as specifying the total width of the element’s box, 8em in this case. In Standards Mode, it specifies the width of the content of the element, so that the total width of the box 12em (plus the widths of the borders). That is, the total width con­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 used by IE in Quirks Model, by using the command CSS/Use Border Box Model in Web Developer 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>.

A form that should have yellow background.

Rendering on IE 7 in “Standards Mode”:

A wrong appearance as described in text.

On IE 7, if a form element is preceded by a 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 the form starts, in terms of markup.

This bug does not exist in previous versions of IE.

Presumably, this bug is connected with the fake “XHTML orientation” in IE 7. This browser version, despite actually not supporting XHTML, imposes some XHTML-like restrictions on (non-XHTML) HTML documents! In XHTML, the end tag </p> is not optional. Another bug of this kind is that some valid entity references like &Omega are not interpreted properly but displayed literally by IE, since they lack the terminating semicolon, which is always required in XHTML. (This bug appears in both Standards Mode and in Quirks Mode.)

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

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

Checking the mode

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

IE 8 “compatibility mode” is different

IE 8 has a “compatibility mode” icon in its address bar 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 the same as switching between Quirks Mode and Standards Mode. Some features of rendering may be affected, but crucial issues such as box model are unaffected; they are based on the doctype declaration. When it causes Standards Mode, the “compatibility mode” means that IE 8 emulates IE 7 in some issues. In Quirks Mode, “compatibility mode” means emulating IE 5, more or less, See Microsoft’s complicated explanation of this feature and their page Defining Document Compatibility.

IE 9: more confusion

IE 9 has seven different rendering modes, with different intermediate 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 simulates IE 7 – though this isn’t nearly as bad as Quirks Mode. Check Henri Sivonen’s page Activating Browser Modes with Doctype for the whole story.

IE 10: added confusion

In IE 10, the old IE Quirks Mode is now called IE 5 Quirks Mode. Another Quirks Mode has been added, under the plain name Quirks Mode or the name HTML5 Quirks Mode, which better resembles the Quirks Modes of other browsers. It is briefly described in the Microsoft document HTML5 quirks mode. The mode is presumably meant to reflect what is defined as Quirks Mode in “HTML5”, which means in practice things like HTML5 CR (which has notes about Quirks Mode scattered around) and Quirks Mode Living Standard and some other specification-like documents.

The bad news to people maintaining legacy pages is that lack of DOCTYPE triggers this new Quirks Mode on IE 10. This means that things may go badly wrong on very old-style pages that relied on old quirks and IE-specific features (like the expression() construct in CSS). The way to get the old IE Quirks Mode is to use the following tag:

<meta http-equiv="X-UA-Compatible" content="IE=5">