Of all the web browsers currently available, only one of them - Internet Explorer - offers any kind of backward compatibility feature for helping it to work with sites written for older versions.

As far back as IE 6, the browser was able to display pages using "Standards mode" or "Quirks mode", for compatibility with old sites. Subsequent releases have added further compatibility modes, such that IE 10 now offers compatibility modes for IE9, IE8 and IE7 as well as the original Quirks mode.

This all sounds like a good thing, but it does bring with it some complications.

Avoiding Quirks Mode
Lets deal with Quirks mode first. There's only one thing you want here: to avoid it at all costs. Quirks mode is basically an emulation of IE 5.5, which as you should know is ancient history. The mode was necessary when IE6 was released because IE6 made some major changes to the default layout mechanisms in order to conform to standards. These days, we don't have any old sites still using quirks mode because they wouldn't work in other browsers. But it is still there in modern IE versions, so we still need to know about it even if we don't want to use it.

Microsoft didn't want end users to need to think about which mode to use, so they put the onus on developers to trigger quirks mode or not. The trigger mechanism is a <!DOCTYPE> declaration. The doctype was a part of the new HTML standards that were being introduced at the time, so by declaring it, the web developer was implying that they wanted to use standards mode, and by missing it out, they were implying that they didn't.

The end result is that many inexperienced web developers write their page and test it using Chrome or Firefox, but don't think to include a doctype. The other browsers display it perfectly fine, but IE jumps into quirks mode, and the page looks like a complete disaster.

The solution, of course, is to use a doctype. There are plenty to choose from, but in all honesty there's very little point in using anything other than the HTML5 doctype, which is simply this:

<!DOCTYPE html>

The other issue of note that can arise here is that the doctype must be the very first thing on the page. If there is anything before it - even just blank lines, white space or comments - IE will ignore it, and fall into quirks mode. This is quite a common bug, especially for pages that are generated by a language like PHP, where it is easy to add unwanted white space without realising it.

Compatibility Mode
All versions of IE from IE8 include compatibility modes for the versions. These are in addition to Quirks mode. Thus, IE10 comes with IE10 standards mode, IE9 compatibility mode, IE8 compatibility mode, IE7 compatibility mode and Quirks mode. Together, IE refers to these modes as the Document Mode.

There is also a feature called Browser Mode, which also offers IE10, IE9, IE8 and IE7 options. The two mode options are visible (and changeable) using the Developer Tools feature (press F12 to open the dev tools window). It's important to know the difference between these two mode options.

Changing the Document mode option means that you're changing the browser's rendering engine. Depending on which one you pick and what features your site uses, this can obviously have some fairly dramatic results.

Changing the Browser mode does nothing to the rendering engine at all. All it does is change the User Agent string that the browser sends as part of its HTTP headers to identify itself to the server.

This means that it's perfectly possible, using the dev tools options, to tell the server that you're using IE7, while in fact you're in IE10, using the IE9 rendering engine. Or indeed, various other combinations. Not necessarily a good idea, but perfectly possible.

Where it starts to get complicated is how the browser decides which of those modes to use by default when it loads a page.

For the average user browsing the web using IE, the default mode is perfectly sensible: IE will pick the best rendering engine available to it. So IE9 will pick IE9 mode, and so on. The user can change it manually, or the site can override it, but generally most users never need to worry about it.

However for two other groups of users, it is more complex.

Firstly, people accessing sites within a corporate intranet will find themselves affected by an IE config setting that is switched on by default. That config setting says "Use compatibility mode for local intranet sites". (it doesn't specify which compatibility mode though).

The idea behind this setting is that corporate intranet sites would have been written for the previous version of IE; the setting is basically there to make the upgrade path smoother for the company to move to the next version of IE. If there had been an IE6 compatibility mode, this might have actually been a useful feature, since that's the version that many corporates got stuck on, but they didn't, and in my experience very few companies actually need this option. A company that has a clued-up IT department can change the setting of this flag in their default Windows image, and roll it out to all users quite easily. But smaller companies that don't know about it are often caught out. If your local intranet sites aren't working as well as you'd expect them to, this may be the issue.

The other group of people who are often caught out by this is - ironically - web developers. This is because if you're developing on your local PC (ie localhost), it counts as a local intranet site, and thus the config setting described above is triggered. Typically these are less experienced developers or those who have mainly worked with other browsers; obviously you'll only likely be caught out by it once. But nevertheless, it can be a difficult one to work out, and it does generate a lot of questions on sites like StackOverflow.

The real killer with all these compatibility modes is that their rendering engines are not identical to that of a real copy of the IE version they claim to emulate. So IE7 compatibility mode has some significant differences with a real copy of IE7.

How to specify the mode
There are some cases where you as a web developer will want IE to use a specific rendering mode for your site. This may be because your site is known to be compatible with one IE version but not others, so you want to tell IE to use that mode. Or you may want IE to use the best mode available and override the config settings.

For these cases, IE provides a feature called X-UA-Compatible.

You can either specify this as a meta tag in your HTML code, in the <head> section, like so:

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

The content value allows you to specify the IE version you want to target, or if you want it to simply use the best available engine, set it to content="IE=edge". My advice is to use this setting in every site you write, unless you have specific reason not to.

As an alternative to having he meta tag in your HTML code, you can specify it as a HTTP header. The code for doing this will vary according to which web server software you're using. The effect is much the same either way, so it's up to you whether to use the HTML tag or the HTTP header.

Where's IE6 mode?
For a long time, many IE6 users - particularly corporates - stubbonly clung to their old IE version, citing the need to remain compatible with existing software. For most of them, that IE version was IE6.

In a lot of cases, the problem wasn't as bad as they thought it was; IE7 and IE8 are generally capable of running most IE6 sites with minimal issues. However for those users for whom IE6 was the only answer, there was no easy upgrade because none of the later versions have ever offered an IE6 backward-compatibility mode. This always struck me as odd, given that IE6 was always the one that most people seemed to need to stick with, and particularly odd given that an IE5.5 compatibility mode is available. Nevertheless, that's how it is.

Now that we're moving past the era when IE6 really matters, the lack of a fallback mode for it is becoming less and less relevant, but for those few companies still holding out because of an internal app that is IE6-only, there are other options.

The only official fall-back offered by Microsoft is with Windows 7, which provides a WindowsXP mode; a complete WindowsXP environment in a virtual machine, including a full copy of IE6.

All the options basically boil down to using IE6 for that specific application, and a different version (or even a different browser) for everything else. Win7's XP mode is a good solution for this. If that isn't an option for you, a company called Browsium offer a multi-browser and browser version integration platform, which may be able to help you. It effectively does what Microsoft didn't do, and builds an IE6 mode into modern IE versions. It's an expensive solution, but for large corporates with software that relies on IE and definitely cannot be upgraded or replaced, it does finally give them the ability to upgrade the rest of their systems.


There are no comments on this post.