IE 兼容模式 设置 Meta Compatible 和 Iframe 子页面的关系

背景

因为历史原因，之前很多的系统都会是 顶级页面+Iframe来加载子级页面的这种模式构件系统，而且系统都只能运行在IE6或者IE 高版本兼容模式下（IE 7模式）。 随着现在的审美原来越高，脚本能里越来越强，无论是用户和是软件商都希望能系统升级，那么在升级的过程中，肯定是要保证原有的系统能正常运行的。

通常的做法会是如下：

将页面利用 html meta标签，设置Compatible属性，来使得无论用户是否设置了兼容模式，都让当前网页强势使用最高版本浏览器模式，这样可以让我们界面利用一些css3的特性做出性能更好，更漂亮的网页。也能使用更复杂的JS，更页面增加更强的效果。

那么可能会遇到以下几种情况：

1. 顶级页面设置了Compatible, IE=Edge。 你会发现原来系统iframe能正常的网页，在你新的页面中运行不正常了，即便开启了兼容模式，或者iframe里面的网页设置了 Compatible, IE=EmulateIE7。你的页面依然浏览不正常。
2. 要解决上面的问题，就是顶级页面不能设置Compatible, IE=Edge，你可以设置顶级页面的Compatible, IE=EmulateIE8或IE=EmulateIE7，则可以让iframe里面的网页浏览正常。
3. 使用了第2步骤的解决方案，你会发现，当你新做的网页，里面用到了css3或者高版本的脚本库如（vue.js），在测试IE9中很正常，但是将网页签入到iframe中后，页面不正常，或者脚本报错。这是因为当顶级页面设置为IE=EmulateIE8或IE=EmulateIE7，iframe里面的页面设置IE=edge不起作用，它的文档模式显示的是IE8。

为什么会出现这种情况呢？

原因和解释

stackoverflow的一个问题《Trying to use IE=edge X-UA-Compatible in an iframe on a page using IE=EmulateIE7》， 有人给出了答案：

IE does not allow mixing IE9+ and older modes in a frame hierarchy. If your top document is IE7, the highest you can get in any inner document is IE8. Similarly, you wouldn't be able to host anything but IE9 mode docs inside an IE9 mode page.

上面的答案很通俗易懂，翻下大意如下：

在IE中不允许IE9+的模式和旧模式混合，如果顶级页面的文档模式是IE7，则你在iframe中的页面最高级的文档模式是IE8，同样，顶级页面的模式是IE9+，则iframe中的页面文档模式不可能低于IE9 以下。

这个答案和上面我们遇到的问题是完美契合的，我们也可以写一些例子来证明这个答案，【例子 】放在附件中，可以下载更改Compatible测试验证下。

csdn上也有人遇到了，这个问题，有同学回答和上面的一致，直通车《能不能让iframe内外的页面用不同的文档模式解析》。

结论

当遇到背景当中的问题时，目前好像无解，只能设置顶级的网页最高为IE8，然后所有的系统都必须兼容IE8模式，想不支持IE8模式，只能当做外链来打开。所有如果要支持前有的系统，无论再过多少年，前端技术如何发展，你新做的系统，技术上也只能限定在IE8支持才情况下。

该如何考量这个问题，还需要从业务、和迁移策略上改变，可以考虑如下几种方式：

1. 升级顶级的页面支持最高版本浏览器支持，那些需要兼容模式才能运行的系统，考虑是否使用外链的方式打开。
2. 保留原有的顶级页面，做一个新的顶级页面，在顶级页面打开的那些系统时，提示用户去旧的平台打开，并给出链接，这种做法会失去一些用户体验，怎么样尽量让用户体验更好，就要发挥各自的聪明才智了。
3. 直接使用两个平台，一个平台是就有的系统，一个平台是新的系统。

各位看官，有什么好的想法可以提提。

参考：

1. Specifying legacy document modes
2. Trying to use IE=edge X-UA-Compatible in an iframe on a page using IE=EmulateIE7
3. 使用X-UA-Compatible来搞定IE浏览器兼容模式
4. IE强制标准模式---标准模式与兼容模式设置