Internet Explorer 8 Doctype and HTTP Header Switching
05 April 2008
You may wish to skip to the results or conclusions.
Introduction
Internet Explorer 8 will support three rendering modes:- IE8 best standards mode
- IE7 emulated standards mode
- Quirks mode
Factors influencing rendering mode
There are two factors which influence the choice of rendering mode:- The Doctype, or lack thereof
- The presence (or otherwise) and value of an X-UA-Compatible HTTP header or equivalent meta element.
Interaction between rendering mode triggers
Unfortunately, the documentation I've seen from Microsoft hasn't been entirely clear on how the two factors interact with each other. Since I was curious about this, I constructed a number of test cases.Test cases
Construction of the test cases
Each of the test cases represents a combination of one option from each of the following.| Doctype | Explanation |
|---|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
Known to trigger standards mode in IE7 |
<!DOCTYPE HTML>
|
HTML5 Doctype, documented to trigger Standards mode |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
Known to trigger quirks mode in IE7 |
| Value | Explanation |
|---|---|
| IE8 | Should trigger IE8 mode |
| IE7 | Should trigger IE7 mode |
| Not present | Should trigger IE8 mode |
The test cases
| Meta claims IE8 | Meta claims IE7 | No meta claim | |
|---|---|---|---|
| Standards Doctype | IE8 meta and Standards Doctype | IE7 meta and Standards Doctype | No meta and Standards Doctype |
| HTML5 Doctype | IE8 meta and Quirks Doctype | IE7 meta and Quirks Doctype | No meta and Quirks Doctype |
| Quirks Doctype | IE8 meta and Quirks Doctype | IE7 meta and Quirks Doctype | No meta and Quirks Doctype |
Determining the results
To determine which mode is being used by the browser, each test case consists of two parts.Box model
In Quirks mode, Internet Explorer 7 places padding on an element inside the width or height instead of around the element.By placing two div elements with the same width but different levels of padding, one can observe the rendering of the two elements. If the distance between the left and right borders is the same on each element, then the browser is in Quirks mode.
DOM
In IE8 mode, Microsoft has fixed a bug that causes thedocument.getElementById function to return elements with a name that matches the sought ID.
The test documents include a named anchor, and onload JavaScript attempts to fetch an element with an id that matches that name. There is no such element in the document. If the function returns a true value, then the browser does not exhibit the bug and IE8 mode must be enabled (assuming the browser being tested is Internet Explorer, of course).
Results
| Meta claims IE8 | Meta claims IE7 | No meta claim | |
|---|---|---|---|
| Standards Doctype | IE8 Best Standards | IE7 Standards | IE8 Best Standards |
| HTML5 Doctype | IE8 Best Standards | IE7 Standards | IE8 Best Standards |
| Quirks Doctype | IE8 Best Standards | IE7 Standards | Quirks |
Conclusions
I have to confess to be a little surprised at these results since I expected a meta claiming IE7 to cause the browser to act exactly as IE7 did, but as far as I can tell:If no mode specifying meta element or HTTP header is present, then IE8 will use Best Standards Mode for documents with a Standards mode Doctype (including HTML5) and Quirks mode for other documents.
Otherwise, if the specified mode is IE8 then IE8 Best Standards mode will be used and if the specified mode is IE7 then IE7 Standards mode will be used. This overrides the Doctype based mode detection entirely.