determining why a page is being renderred in compatibility mode?

Question

I have a layout issue which is due to the containing page being rendered in compatibility mode on IE8. Is there a way to detect whats causing IE8 to enter compatibility mode for a particular page?

According to Microsoft's documents, the following conditions can cause a page to be rendered in compatibility mode (http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx):

• Compatibility View is enabled for the page.
• The page is loaded in the Intranet zone and Internet Explorer 8 is configured to pages in the Intranet zone in Compatibility View.
• Internet Explorer 8 is configured to display all Web sites in Compatibility View.
• Internet Explorer 8 is configured to use the Compatibility View List, which specifies a set of Web sites that are always displayed in Compatibility View.
• The Developer Tools are used to override the settings specified in the Web page.
• The Web page encountered a page layout error and Internet Explorer 8 is configured to automatically recover from such errors by reopening the page in Compatibility View.

After reviewing the page, I've ruled out the first possibilities such that it must be a page layout error on the page. I'd like to locate this error.

Answer 1

Assuming you have a hidden element with the ID compat-warning:

Javascript w/ jQuery:

$(function(){
    function showCompatWarning() {
        $('#compat-warning')
            .css('display','block')
            .css('height','auto')
            .show();
    }
    var tridentOffset = navigator.appVersion.indexOf('Trident/');
    if ( tridentOffset === -1 ) return;
    var jscriptVersion = 0;
    /*@cc_on @*/
    /*@if (@_jscript) jscriptVersion = @_jscript_version ; @*/;
    /*@end @*/
    var tridentVersion = parseInt(navigator.appVersion.substr(tridentOffset+8),10);
    var guessIEVersion = tridentVersion + 4;
    if (( document.documentMode && jscriptVersion && jscriptVersion < 10 && jscriptVersion !== document.documentMode ) ||
        ( document.compatMode && document.compatMode === 'BackCompat') ||
        ( document.documentMode && document.documentMode < 10 && document.documentMode != guessIEVersion ))
        showCompatWarning();
});

Detection and warnings, your first and last lines of defense against compatibility hell.

Answer 2

Check if you have any <meta> tags forcing IE into compatibility mode.

You can force it to render as IE8 (fully CSS 2.1 compliant) if you wish:

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