什么具体的事情会导致 IE8 触发兼容模式？答案

【问题标题】：What specific things cause IE8 to trigger compatibility mode?什么具体的事情会导致 IE8 触发兼容模式？
【发布时间】：2012-01-25 17:07:06
【问题描述】：

我有一个应用程序在某些情况下会导致 IE8 弹出兼容性消息并以兼容模式重新加载：

显示问题导致 Internet Explorer 刷新网页使用兼容性视图

据我所知，这种情况很少见，并且不会由于元标记而发生。它作为对更改 DOM 的用户操作的响应而发生。这与：https://superuser.com/questions/215281/how-do-i-stop-i-e-jumping-into-compatability-view 的问题相同，但我的问题是：是什么类型的事情导致了这种情况，以帮助解决它。

换一种说法，看这个网站thesitewizard.com，其中IE8兼容模式的第三个原因被描述为：

并且，有时，出于其他一些深不可测、未记录的原因，在被验证为符合标准的页面（或者，至少，它确实这在候选版本 1) 中。

问题是：什么深不可测、没有记录的原因？

【问题讨论】：

我从未见过 HTML Validated 页面“跳转”到兼容性视图。但是，在没有看到您的应用程序的情况下，谁能帮助您呢？否则这里的答案将只是一串随机的猜测。
请看问题标题。我正在寻找导致这种情况的原因，以帮助指导调试。至于没见过，请点击问题中的超级用户链接，有截图。
我阅读了标题并了解您在寻找什么。但是，提出一个无法得出特定正确答案或解决方案的问题可能会被关闭。
如果有人对此问题有答案，他们可以发布：“我遇到了这个问题，发现是 X 造成的。”或者，“众所周知，在 Y 时做 X 会导致这种情况。”
天哪！ IE 会这样做吗？原因 #9762 任何人都不应该使用 IE。

标签： html internet-explorer-8 ie8-compatibility-mode

【解决方案1】：

经过长时间的调试（使用老派的警报来查明哪里出了问题），这个看似无害的 dom 操作线路是罪魁祸首：

document.getElementById("literal"+varValue).style.display = "none";

这里没有错误，显然找到了元素（即，这不是花园品种的空指针）。

这是一个大型应用程序，围绕此代码有很多事情要做。我将它切换到以下，这显然已经阻止了这个问题：

setTimeout(function(){
           var layoutEl = document.getElementById("literal"+varValue);
           if (layoutEl)
               layoutEl.style.display = "none";
       },10)

【讨论】：

对我来说，尝试隐藏特定元素会导致 IE8 使用兼容性视图刷新页面。我正在使用 jQuery，所以使用 .hide() 并使用 duration 选项就可以了，例如$('#id').hide(1).

【解决方案2】：

以下内容来自一篇MSDN文章“Controlling default rendering”。

请注意，某些条件（如此处列出的条件）可能会强制 Internet Explorer 以不同于网页中指定的文档兼容性模式显示页面。

为页面启用了兼容性视图。
该页面在 Intranet 区域中加载，并且 Internet Explorer 配置为对从 Internet 区域加载的页面使用兼容性视图。
该页面是从用户的本地文件系统加载的（这意味着该页面是在 Intranet 区域中加载的），并且 Internet Explorer 被配置为对从 Internet 区域加载的页面使用兼容性视图。
Internet Explorer 配置为在兼容性视图中显示所有网站。
Internet Explorer 配置为使用兼容性视图列表，该列表指定一组始终显示在兼容性视图中的网站。
开发者工具用于覆盖网页中指定的设置。
网页遇到页面布局错误，Internet Explorer 配置为通过在兼容性视图中重新打开页面来自动从此类错误中恢复。
该页面包含一个 Web 标记，指示将其加载到特定区域。

这些链接提供了描述 Internet Explorer 如何确定网页的适当文档模式的附加信息：

【讨论】：

【解决方案3】：

我知道你已经有了答案，但是今天我也一直在寻找导致 IE8 触发兼容模式的原因。我搜索了 JavaScript 代码、css（:first、:last 等），但它似乎是一些内联样式：

最大高度结合溢出..

所以这（也）会触发 IE8 中的兼容模式：

style="overflow:scroll;max-height:200px;"

这不是，所以它解决了我的问题：

style="overflow:scroll;height:200px;"

编辑：我认为这是相关的： IE8 overflow:auto with max-height

【讨论】：

谢谢 - 如果您认为这个问题很好，请不要忘记支持这个问题
我删除了页面上溢出的元素，强制在兼容性视图中加载，并且页面正常加载。发现问题。

【解决方案4】：

我知道这是一个老问题，但我想我会添加一些我刚刚遇到的问题。我遇到了强制兼容模式的问题，我无法追踪源。我手动将页面退出兼容模式，并注意到某些字符未显示。它最终成为一个在伪元素上使用自定义字符的项目符号列表：

li:before {
  content: '\25B6';
}

作为一个快速修复，我最终只是为小于 9 的 IE 覆盖了这个：

.lt-ie9 li:before {
  content: '';
}

This article 给了我寻找错误处理字符的想法。希望这对偶然发现类似问题的人有所帮助！

【讨论】：