企业IE11迁移指南:兼容性问题解决方案
2016年9月16日

在解决IE11网页兼容性问题时,我们首先要了解下兼容性问题的本质是什么,也就是说我们的目标是什么。基本上可以概括为以下两类:

原因 目标
不正确的文档模式 使IE11以原有的文档模式来渲染网页
不正确的User-Agent 如果网站依赖于某些特定的User-Agent,我们需要使IE11依然使用原有的User-Agent来渲染页面

不正确的文档模式

不正确的文档模式 是最常见兼容性问题的根本原因。同样的页面如果不包含一个标准的DOCTYPE声明,在IE10之前都会以怪异模式(文档模式5)来运行,而IE10和IE11会以最高的文档模式来运行。这个默认文档模式选择行为的变化带来了许许多多兼容性问题。虽然你观察到的兼容性问题的表象可能是:布局乱了、点击某个按钮没反应、模块功能不工作等等,但其内在的本质就是:网页运行在一个不正确的文档模式下

鉴定方法

咨询网站的开发人员来确定该网站可以正常工作的文档模式,或参考以下方法来检查网站在旧版本IE中使用的文档模式。最后看一下当前网站在IE11中运行的文档模式,如果文档模式不一致,请手动在F12开发者工具中将文档模式修改为正确的文档模式来看看兼容性问题是否能得到解决。

  1. 打开 F12 开发者工具查看右上角显示的文档模式。

    IE10 F12开发者工具

    IE11 F12开发者工具

  2. 在 F12 开发者工具的控制台中运行脚本:document.documentMode

    F12控制台

  3. 在地址栏中运行:javascript:alert(document.documentMode)

    从地址栏弹出文档模式值

如何改变文档模式

在确定兼容性问题的确由于不正确的文档模式造成后,我们可以通过服务端方案或客户端方案来使IE11以正确的文档模式来运行该站点。以下3个方案可以覆盖浏览器默认文档模式的选择。

  1. 服务端方案:X-UA-Compatible(推荐方案)(适用于文档模式5~11)

    关于如何使用X-UA-Compatible来指定IE使用某种文档模式,可以参考:企业IE11迁移指南:详解浏览器模式、文档模式、User-Agent和X-UA-Compatible

  2. 客户端方案:兼容性视图(适用于文档模式5和文档模式7)

    关于如何配置兼容性视图,可以参考:企业IE11迁移指南:详解兼容性视图模式和本地Intranet站点

  3. 客户端方案:企业模式(适用于文档模式5~11)

    关于如何配置企业模式,可以参考:企业IE11迁移指南:了解和使用IE11企业模式

不正确的User-Agent

有些网站服务器会根据浏览器发送的User-Agent来返回不同的内容。比如一个在IE8年代开发的网页应用只能在IE中工作,于是开发人员在后端代码中判断浏览器发送的User-Agent是否包含“MSIE”关键字,如果有的话则认为请求来自IE浏览器并返回正常的网站内容,如果没有的话则认为请求来自于其它浏览器并返回一个提示页面告知用户应使用IE浏览器。然而升级至IE11后,由于IE11的默认User-Agent不再包含“MSIE”关键字,IE11也被视为非IE浏览器。这就是一个典型的因为使用了不正确的User-Agent造成的兼容性问题。

鉴定方法

咨询网站开发人员网站是否依赖于某些特定的User-Agent才能工作。

如何解决问题

  1. 服务端方案:修改服务端的User-Agent检测逻辑,建议使用前端特性检测(推荐方案)

  2. 客户端方案:兼容性视图(模拟IE7的User-Agent)

    关于如何配置兼容性视图,可以参考:企业IE11迁移指南:详解兼容性视图模式和本地Intranet站点

  3. 客户端方案:企业模式(模拟IE7~IE11的User-Agent)

    关于如何配置企业模式,可以参考:企业IE11迁移指南:了解和使用IE11企业模式

其它兼容性问题

如果网站的兼容性问题并不由于文档模式或User-Agent造成的话,那么我会建议将网站地址加入本地Intranet站点后再试。有些兼容性问题可以通过该方案解决,比如:由IE11“Natural Metrics”造成的页面布局问题

IE11虽然内置了IE5、IE7、IE8、IE9、IE10和IE11六种文档模式以模拟各时期的IE行为,但不能确保100%还原。依然有许多相同文档模式但行为不同的边缘案例,有些问题可能IE产品组已经或者正在积极修复,我们可以尝试:

  1. 保持IE11一直使用每月最新的累积更新。
  2. 开发人员诊断问题,并修改代码来解决兼容性问题。
  3. 联系微软以提供技术支持。