Search code examples
htmlinternet-explorerdoctypequirks-mode

Put all IEs older than IE9 into quirks mode via HTML directives

I want my page to be rendered in Quirks mode in IE6, IE7 and IE8. I want to keep all other browsers (recent versions) in HTML5 standards mode.

What does not work:

  • Put the DOCTYPE declaration into second line (known measure in IE, but will trigger quirks in IE9 as well)
  • Omit the DOCTYPE declaration (will trigger quirks in at least FF, MDN docs)

Any ideas, how I could accomplish this via purely HTML measures?

Some background:

Because of heavy usage of the border box model, my page layout happens to render best if the older IEs are in Quirks mode. Support for box-sizing did not appear in IE before version 8. There is sum other stuff, that also works better in IE8 quirks.

My use of the border box model:

  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
Solution

  • You can establish this using the X-UA-Compatible meta tag in combination with conditional comments.

    First, use a conditional comment to hide the tag from IE 9 and later:

    <!--[if lt IE 9]>

    Then, insert a meta tag that triggers quirks mode:

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

    Next, close your conditional comment:

    <![endif]-->

    Also, make sure you start your document with a <!doctype html> so IE9 won't be in Quirks mode; if it already uses the IE 5.5 rendering engine it won't ignore the conditional comment.