定义文档兼容性，让IE按指定的版本解析咱们的页面

时间 2021-08-14

标签 html 前端 web ajax chrome api 浏览器服务器 asp.net ide 栏目 HTML 繁體版

原文原文链接

做为开发人员，特别是做为Web的前端开发人员，最悲催的莫过于要不断的，不断的去调试各类浏览器的显示效果，而这其中最让人头痛的莫过于MS下的IE系列浏览器，在IE系列中的调试咱们将会发现没有一个是好伺候的，因而不得不学习各类Hack技术来知足各类浏览器之间的兼容。在这种痛苦中不断的挣扎，MS可能也实在是看不下去了，因而在IE8开始，微软引入了文档兼容性，而这，终于可让前端的开发人员稍微可以喘口气。前端

文档兼容性是对 Microsoft Internet Explorer 6 中引入的兼容性模式的扩展，使您能够选择 Internet Explorer 用于显示网页的特定呈现模式。——微软的官方文档。web

在这里先介绍两个概念：浏览器模式(browser mode)和文档模式(document mode)。这两个模式的引入，让咱们在IE浏览器上可以简单的处理兼容性问题，固然，其实也并不简单，先看看这两个概念的定义：ajax

浏览器模式（browser mode）：于切换IE针对该网页的默认文档模式、对不一样版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。网站能够根据浏览器返回的不一样用户代理字符串判断浏览器的版本和安装的功能，这样就能够向不一样的浏览器返回不一样的页面内容。chrome

默认状况下，IE8的浏览器模式为IE8。用户能够经过单击地址栏旁边的兼容性视图按钮来手动切换到不一样的浏览器模式。在IE8中，IE8兼容性视图会以IE7文档模式来显示网页，同时会向服务器发送IE7的用户代理字符串。api

文档模式（document mode）：用于指定IE的页面排版引擎（Trident）以哪一个版本的方式来解析并渲染网页代码。切换文档模式会致使网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器从新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。浏览器

简而言之：浏览器模式的改变，可以改变请求中User Agent的值，让服务器获取后，可以按照UA的值进行对应处理（若是服务器上有这个处理功能）。而文档模式的改变只反映在本地的浏览器解析HTML上，对客户端显示会有影响，而对服务器透明。同时，修改浏览器模式会影响文档模式，反之却不成立。服务器

使用文档兼容性的方法比较容易，就是在咱们要反馈给客户端的HTML代码中的head中添加一个meta元素，用来描述当前的文档须要使用何种浏览器版原本解释当前文档，代码相似下面这样：asp.net

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>测试模拟IE7浏览模式</title>
</head>
<body>
  <!--这里是你网站的内容-->
</body>
</html>

X-UA-compatible在使用中，大小写不敏感，若是你须要客户端模拟其余的浏览器版原本解析文档你能够设置为对应的版本便可，一般的设置有以下几种：ide

文档兼容性设置 X-UA-compatible
X-UA-Compatible值	说明
IE=5	让浏览器使用Quirks mode来显示，其实是使用Internet Explorer 7 的 Quirks 模式来显示内容，这个模式和IE5很是类似。
IE=edge	这个设置是让IE使用当前的最高版本进行文档的解析，官方文档指明，edge模式仅适用在测试环境，不建议在生产环境中使用
IE=7	使用标准IE7来处理
IE=EmulateIE7	模拟IE7来处理，遵循 <!DOCTYPE> 指令，若是文档有当前有一个合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），对于大部分网站来讲，这是首选的兼容性模式
IE=8	标准IE8
IE=EmulateIE8	模拟IE8，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明
IE=9	标准IE9
IE=EmulateIE9	模拟IE9，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明
chrome=1	强制使用Chrome，须要IE下Chrome插件支持
IE=EmulateIE10	模拟IE10
IE=10	标准IE10，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明

固然，除了这以外，你还能够设置其余值，甚至能够是7.5这样的数值（我的不建议），IE解释的时候，会尝试将数值转为最接近的版本。chrome 这个是使用Chrome插件来处理当前的文档内容，你也能够在HTML中插入下面的代码，以便在用户没有安装Chrome插件的时候，提醒用户：

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
 <!--在须要使用的地方进行Chrome Check--><script>CFInstall.check();</script>

这样在用户访问的时候，若是发现没有安装Chrome插件，就会提示安装Chrome插件。

到这里，咱们基本上已经知道怎么使用X-UA-Compatible标头了，让咱们更进一步！

其实，X-UA-Compatible不只能够用meta元素放在页面内，也能够在服务器上进行配置，好比在IIS上配置默认的Header，或者在使用.NET中配置web.config文件，让服务器端配置上默认的标头，这样系统就有默认的标头来指定全局的文档模式。由于单个页面的文档模式设置会覆盖默认的文档模式，所以，在某个须要特殊的文档模式展现的页面能够在进行单独配置meta元素便可。

在IIS7中的配置X-UA-Compatible标头以下：

Apache下面配置X-UA-Compatible响应标头的方法：点击这里下载MS官方文档[PDF]

在web.config中的配置以下：

<?xml version="1.0" encoding="utf-8"?><configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer></configuration>

这里的配置和前面配置meta元素不一样，这里配置的HTTP响应标头是在客户端请求服务端以后，在服务端的响应标头中出现的（Response Header）。所以在页面中是没有meta元素的，咱们能够在响应标头里面看到这个信息。

到这里，咱们已经知道了如何在IIS上或者在.NET程序中配置全局性的X-UA-Compatible标头了，咱们也了解了在页面的meta元素中添加X-UA-Compatible，能够说，咱们已经了解了X-UA-Compatible的全部用法，在实际中咱们彻底能够根据本身的状况，选择一种或多种方式来知足咱们的项目需求。然而，事实上，咱们在使用的过程将会发现彷佛不是那么的顺利，咱们将会发现IE是否是会处于Quirks mode（怪癖模式）下，这是怎么了？恩，问题千奇百怪，然总归是咱们了解不精罢。但咱们深受其困的时候，咱们就可能还须要再进一步——了解IE究竟是如何处理这个标头的！

对于IE的处理方法其实也并不难理解，一张图就能清晰的描述出IE对于X-UA-Compatible的处理方式：

从这张图片中咱们就可以很是清晰了解到IE处理X-UA-Compatible的方式，知道原理以后，咱们碰到关于X-UA-Compatible的问题处理起来也就知道如何进行了。剩下的时间，让咱们休息一下吧，好好享受M$给咱们带来的这片刻的宁静。。。

via:Mitchell Chu's Blog

版权声明：转载时请以超连接形式标明文章原始出处和做者信息及本声明
文章引用地址：http://www.iefans.net/dingyi-wendang-jianrongxing-zhiding-banben-jiexi/ 做者：iefans