Triggers of Quirks Mode in IE

Discover what triggers IE's quirks mode and how it affects layout rendering.

The issue starts with horizontally centering a layout, for example:

(head omitted)

To make the wrapper fixed width and horizontally centered, you need

#wrapper {width:960px;margin:0 auto;}

However, in IE's quirks mode, you need to add

body {text-align:center;} #wrapper {text-align:left;}

I once thought this was a hack for IE6, but upon correct understanding, this is only an issue in IE's quirks mode. So, under what circumstances does IE's quirks mode typically trigger: 1. No DOCTYPE, which is the most common; 2. A DOCTYPE is declared, but not on the first line of the document. Experimental evidence shows that having any non-empty characters before the DOCTYPE will trigger IE6's quirks mode. In IE7, having an XML document declaration before the DOCTYPE does not trigger it, but any non-empty characters between the DOCTYPE and the XML declaration will still trigger.

Therefore, to avoid triggering quirks mode, ensure that the DOCTYPE is written on the very first line of the entire HTML document.