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.

Regarding Page Layout error: The Compatibility View is actiavated when the IE8 rendering error encounters an "unrecoverable error". I'm not sure what this is. But I'd suggest make your page validate HTML (what DOCTYPE do you have?) then, try removing CSS and JavaScript part by part, so you can rule out what's causing the problem, — Daniel, Jun 23 '10 at 18:22

score 4 · Answer 1 · answered Jun 23 '10 at 17:18

4

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"/>

answered Jun 23 '10 at 17:18

Daniel

4,918
4
33
34

1

Note that the `X-UA-Compatible` meta tag needs to be the first meta tag in the `head` – Agent_9191 Jun 23 '10 at 17:21

score 0 · Answer 2 · answered Mar 26 '15 at 20:25

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.

determining why a page is being renderred in compatibility mode?

2 Answers2

Linked