如何禁用 IE9 中的兼容模式按钮？答案

【问题标题】：How can I disable the Compatibility Mode button in IE9?如何禁用 IE9 中的兼容模式按钮？
【发布时间】：2011-10-16 10:53:14
【问题描述】：

我无法在 IE9 中禁用 IE 兼容模式按钮。

我的头像和文档类型是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lte IE 8]> 
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en" class="ie8">
 <![endif]-->
<!--[if IE 9]> 
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en" class="ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-en" xml:lang="en-en">
<!--<![endif]-->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="meta content here" />
  </head>
  <body>
    <!-- page content here //-->
  </body>
</html>

如何禁用 IE9 中的兼容模式按钮？

我以为我做了我的研究。我应用了各种后备解决方案来显示从 7 到 9 及更高版本的每个 IE 中的所有内容。

客户端抱怨兼容模式在激活时会弄乱布局。有什么方法可以禁用该按钮？

【问题讨论】：

标签： cross-browser internet-explorer-9 ie8-compatibility-mode x-ua-compatible

【解决方案1】：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Chrome 框架已于 2014 年 1 月被 Google 停产，因此 chrome=1 部分为不需要

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

IE 中的“edge”强制标准模式（或最新的渲染引擎），“chrome”适用于 Chrome Frame。

此处提供更多信息：

【讨论】：

当我将这个标签移到<head> 之后的第一件事时，我终于让它工作了（虽然我没有包含chrome 位）
<head> 中的位置无关紧要。但是<!--[if gte IE 8]>等条件标签会干扰正确的元标签，所以不要使用它们。导致兼容模式按钮消失的元数据（在 Windows 7 的 IE10 中测试）是<meta http-equiv="X-UA-Compatible" content="IE=edge">

【解决方案2】：

我在页面顶部使用条件 cmets 来嵌入基于版本的 ie 类。（例如：）

<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->

因此，即使我设置了X-UA-Compatible 元标记，兼容模式按钮仍然显示在 IE 中。

为了解决这个问题，我不得不将条件 cmets 移动到页面底部并使用 JS 来应用 ie 类。查看我的网站时，IE 中不再显示“兼容性”按钮。

<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=EDGE; chrome=1">
  <head>
  <body>
     <!-- ..Other content... -->
  <script type="text/javascript">
   window.flagAsIE = function(version) {
     var cls = document.body.parentElement.getAttribute('class');
     document.body.parentElement.setAttribute('class', "ie ie" + version + " " + cls);
   };
  </script>

  <!--[if lt IE 7 ]><script type='text/javascript'>flagAsIE('6');</script><![endif]-->
  <!--[if IE 7 ]><script type='text/javascript'>flagAsIE('7');</script><![endif]-->
 </body>
</html>

【讨论】：

【解决方案3】：

答案如下：

http://blogs.msdn.com/b/jonbox/archive/2011/03/27/removing-the-ie9-compatibility-button-and-html1115-warning.aspx

更改元标记的顺序。

【讨论】：

问题依然存在。即使我将其更改为：<head> <meta http-equiv="X-UA-Compatible" content="IE=9">
您是否在控制台中检查过任何类似的消息？您使用条件 cmets 声明 HTML 标记为我引发了标志。
我正在使用 Paul Irish 提出的解决方案来处理 x 浏览器的兼容性问题。只有针对特定浏览器的标签才会被解析。控制台中没有消息弹出。
您链接到的文章又进一步链接到带有用于决定使用哪种模式的工作流程图的 SVG。因为它是 404，所以我从 Archive.org 和 put the SVG here 得到它，resulting PNG image here。

【解决方案4】：

我发现导致按钮出现的是条件 cmets。删除这些并使用特征检测来添加我的 html 类已经解决了这个问题。对X-UA-Compatible 的任何修改都不会删除按钮。

我用过这组has.js检测：

if (has("css-border-radius") && !has("input-attr-placeholder")) {
    html.className += ' ie9';
}

if (!has("css-border-radius") && !has("input-attr-placeholder")) {
    html.className += ' lt-ie9';
}

if (!has("css-box-sizing")) {
    html.className += ' ie7';
}

【讨论】：

【解决方案5】：

问题是在你的 js 代码的某个地方，你正在使用浏览器嗅探代码，如 document.all、window.ActiveXObject、navigatror.userAgent、attachEvent、detachEvent 等。

使用特征检测代码替换所有内容 jquery.support 按钮将消失。

【讨论】：