确定为什么以兼容模式呈现页面？答案

【问题标题】：determining why a page is being renderred in compatibility mode?确定为什么以兼容模式呈现页面？
【发布时间】：2011-03-07 10:37:27
【问题描述】：

我有一个布局问题，这是由于包含页面在 IE8 上以兼容模式呈现。有没有办法检测是什么导致 IE8 进入特定页面的兼容模式？

根据微软的文档，以下情况会导致页面以兼容模式（http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx）呈现：

为页面启用了兼容性视图。
页面在 Intranet 区域中加载，并且 Internet Explorer 8 在兼容性视图中配置为 Intranet 区域中的页面。
Internet Explorer 8 配置为在兼容性视图中显示所有网站。
Internet Explorer 8 配置为使用兼容性视图列表，该列表指定一组始终显示在兼容性视图中的网站。
开发者工具用于覆盖网页中指定的设置。
网页遇到页面布局错误，Internet Explorer 8 配置为通过在兼容性视图中重新打开页面来自动从此类错误中恢复。

在查看页面后，我已经排除了第一种可能性，即它一定是页面上的页面布局错误。我想找出这个错误。

【问题讨论】：

关于页面布局错误：当 IE8 呈现错误遇到“不可恢复的错误”时，兼容性视图被激活。我不确定这是什么。但我建议让你的页面验证 HTML（你有什么 DOCTYPE？），然后尝试逐部分删除 CSS 和 JavaScript，这样你就可以排除导致问题的原因，

标签： ie8-compatibility-mode

【解决方案1】：

假设您有一个 ID 为 compat-warning 的隐藏元素：

带有 jQuery 的 Javascript：

$(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();
});

检测和警告，您抵御兼容性地狱的第一道和最后一道防线。

【讨论】：

【解决方案2】：

检查是否有任何标签强制 IE 进入兼容模式。

如果你愿意，你可以强制它呈现为 IE8（完全符合 CSS 2.1）：

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

【讨论】：

注意X-UA-Compatible元标签需要是head中的第一个元标签