What's the difference between 'quirks mode' and 'compatibility mode' in IE?

Question

I thought they were the same thing except I've just found out they are not!

Using IE8 I can get the same webpage to display in 3 different ways:

1. Standards mode. The XHTML Strict DOCTYPE is at the top of the webpage.

2. Same as above except that 'compatibilty mode' is clicked in IE8. Now the webpage is displayed slightly weird.

3. If I remove the DOCTYPE from the webpage (this forces quirks mode?). Now the webpage is displayed very badly and is not the same as when viewed in 'compatibility mode'. At this point clicking 'compatibilty mode' makes no difference.

Shadow

Answer 1

Quirks mode is basically an IE5 compatibility mode. It is triggered by not having a valid <!DOCTYPE> declaration. The main effect is that it causes the browser to use the IE5 box-model, which means that all your paddings, margins and borders, and anything else which affects the size of a box will be incorrect.

Compatibility mode is an IE7-compatibility mode (IE9 also has an IE8-compatibility mode) which is triggered either by a meta tag specifying that the page should use it, or by the user's browser configuration.

Both can also be specified explicitly in the developer tools window.

Compatiblity mode is occasionally useful for testing (since IE7 doesn't have the developer tools window) and for intranet sites where the company is too cheap to update their code to cope with the newer browser. (but having said that, compatibility mode is not an exact replica of IE7; it has it's own bugs and issues, so for most testing, you're better off sticking with a real copy of IE7)

Quirks mode should never be used. Who in their right mind would want to be compatible with IE5?

Tar

Who in their right mind would want to be compatible with IE5=> my company is stuck in IE5 mode for years to come. Also, memory leaks will plague your web application. – Judsonjudus

Answer 2

The compatibility mode button in ie8 generally reproduces the effects of viewing the webpage through the ie7 browser which means it sets the document mode to IE7 standards if a doctype is present, otherwise sets the document mode to IE5 (or quirks mode).

So (assuming that there's no meta tags overriding normal behaviour) in case 1 the page is displayed in ie8 mode, case 2 in ie7 mode and case 3 its IE5 (quirks mode) regardless of whether compatibility view is used or not.

There's a page here - http://www.nczonline.net/blog/2010/01/19/internet-explorer-8-document-and-browser-modes/ which describes the confusing mess that is document modes in internet explorer a lot more clearly than I can...

Kine