IE, DOCTYPE and Document Modes

Posted in Development.

Just in time for the release of IE9 (which, as an XP user, I can’t use), let’s talk about IE8!

Do you ever find your pages rendering funny in Internet Explorer 8 (or later) on other people’s machines that seem to look fine on yours?

One reason why this can happen is due to the DOCTYPE on your page.

Document Modes

New with Internet Explorer 8 was a new setting called “Document Mode”. Document Mode isn’t immediately obvious if you’re not looking for it.

Ie-compatability-mode

If your document isn’t showing up properly, the first thing to check the compatability mode button just next to the location bar. If this button is engaged, your document is currently in compatability mode and won’t follow traditional web standards.

If you open up Developer Tools by pressing the F12 key, you can take a look at the Document Mode and see which one is currently in use by the document.

Ie-document-mode

 

DOCTYPE and Document Mode

IE follows two basic rules, and one maddening exception:

  1. If your document doesn’t have a DOCTYPE, IE defaults into Quirks Mode
  2. If your document DOES have a DOCTYPE, IE defaults into IE8 Standards Mode 

    BUT 

  3.  If your document resides on a page that your computer believes is on an Intranet, it will default into IE7 Standards Mode.

This last exception can be particularly annoying if you’re not aware that your computer thinks you’re on an Intranet. I’ll talk more about this further down.

 

X-UA-Compatible and Document Mode

When IE8 was released, Microsoft included a tag to be able to change the way in which the document was displayed. This was primarily done for compatability reasons, for example, you actually _want_ your website to display in IE7 Standards Mode, because your site was coded at that time. The bonus is that you can use this tag to try to force IE to display in its most standards-compliant way.

You can do this using the following tag:

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

The tag above forces the document into IE 8 Standards Mode. Other values are:

IE=7: IE 7 Standards Mode

IE=edge: Latest Document Mode (Currently IE9)

chrome=1: Enables Google Chrome Frame, a plugin for IE that makes it render like a modern browser.

You can also use multiple values, for example, to use the latest Document Mode, or Google Chrome Frame if installed, you can use:

< meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />

The X-UA-Combatible tag will almost always take prescidence over the default Document Mode that is determined by your DOCTYPE. Whether you agree with Microsoft’s decision to create the tag or not, it’s a good idea to use it whenever possible – it’ll save you some stress later to ensure that IE always renders it the same way.

You can learn more about Document Modes and the X-UA-Compatible meta tag in this MSDN article.

Intranet and Compatability Mode

Intranets represent a special hurdle to overcome. I mentioned earlier that IE defaults any page with a Standards DOCTYPE on Intranet to IE7 Standards Mode, not IE8. Usually you can override this with the UA-X-Compatible, but there’s another problem that your intranet’s IT department can create for you.

There’s a client-side setting which can be accessed through Tools -> Compatibility Mode Settings. This setting overrides UA-X-Compatible, and unfortunately, there’s no, known way around this setting to trigger IE 8 Standards Mode.

Compat-mode

Your Intranet’s IT department has the option to enable this by default for Intranet pages. If this is the case, you’re probably SOL and get the pleasure of dealing with IE7 bugs.

If you find yourself in this situation, HasLayout.net is a decent site documenting the bugs in IE7 (and others).

If you’ve got any questions or comments, you can leave a comment below or follow me on Twitter.