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

internet-explorer quirks-mode ie-compatibility-mode
David picture David · Jul 18, 2011 · Viewed 7k times · Source

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.

Answer

Spudley picture Spudley · Jul 18, 2011

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?

Related questions

Forcing Internet Explorer 9 to use standards document mode

How can I force Internet Explorer 9 to use standards document mode? I built a website and I'm finding that IE9 uses quirks mode to render the website pages. But I want to use standards mode for rendering.

Read More
How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?

I am coding a Frontend which works well in IE7 Standards Mode and IE8 Standards Mode. When I start up Internet Explorer and load the page both IE7 and IE8 go to Quirks Mode directly. How can I force both …

Read More
How do I get IE9 to use standards compliant mode when developing on localhost?

According to MSDN, all I need to force standards compliant mode is to include the HTML 5 doctype: http://msdn.microsoft.com/en-us/library/gg699338%28v=vs.85%29.aspx And it works when the markup is served remotely. The problem is when …

Read More