Dorward

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
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
HTTP Header or Meta Data
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 the document.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

Results after testing with IE8 Beta 1
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.

Acknowledgements

Thanks to Nate Koechley for suggesting the addition of the HTML5 Doctype tests.