Quirks mode and strict mode

Further information can be found at Jukka 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.

The solution

Therefore any solution to this problem had to

  1. allow web developers who knew their standards to choose which mode to use.
  2. 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.

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

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

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

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

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

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

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

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

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.