我们有一些必须以兼容模式呈现的遗留 HTML 内容。我们的客户希望他们的基于 HTML 的报告（其中一些是在 IE6 时代创建的）外观和打印完全相同，而不管浏览器版本或底层技术如何，我们的客户提出了这一要求。同时，我们希望在我们的 Web 应用程序的其余部分使用标准模式和 HTML5。
一个明显的解决方案是以<iframe>兼容模式托管旧内容。以下似乎适用于跨浏览器：
main.html（标准模式）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 9pt;
font-style: italic;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload = function () {
info.firstChild.data = "document.compatMode: " + document.compatMode;
// test frame's HTML5 API: document.getSelection()
setInterval(function () {
var selection = document.getElementById("contentFrame").contentDocument.getSelection();
var selectedNode = selection.focusNode;
if (selectedNode)
info2.firstChild.data = "Selected node: " + selectedNode.nodeName + ", offset: " + selection.focusOffset;
else
info2.firstChild.data = "";
}, 500);
}
</script>
</head>
<body>
<h1>Standard Mode Page</h1>
<span>body font</span>
<table border="1">
<tr>
<td>Table font</td>
</tr>
</table>
<span>body font</span>
<pre id="info"> </pre>
<pre id="info2"> </pre>
<iframe id="contentFrame" style="width: 500px; height: 300px;" src="frame.html"></iframe>
</body>
</html>
frame.html（在兼容模式下）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">
<html>
<head>
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 9pt;
font-style: italic;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload = function () {
info.firstChild.data = "document.compatMode: " + document.compatMode;
editable.focus();
}
</script>
</head>
<body>
<h1>Compatibility Mode Frame</h1>
<span>body font</span>
<table border="1">
<tr>
<td>Table font</td>
</tr>
</table>
<span>body font</span>
<pre id="info"> </pre>
<div id="editable" contentEditable="true" style="border: 1px dotted red">
Editable
</div>
</body>
</html>
请注意使用相同 CSS 渲染 的区别table：
我对有经验的 Web 开发人员的问题：这是一个可以在生产环境中使用的受支持的场景（主要是 IE8+，但偶尔是 Safari/Chrome/Firefox）？有没有更好的方法来做到这一点？
我偶然发现了一个相关但相反的问题，这让我百感交集。
[更新]（基于评论）：
所有 JavaScript 都驻留在主页面中，并且看起来工作得很好。有趣的是（而且很棒！），内部框架的视图以兼容模式呈现，但其 DOM 可以使用标准模式功能（至少在从主页访问时）。例如document.getSelection可以工作（也可以跨浏览器）。
支持的场景是指 W3C HTML 和 DOM 标准的任何认可。到目前为止，我还没有找到一个明确的答案。这种行为也可能只是一个很好的副作用，尽管它跨浏览器工作的事实是有希望的。
MSDN说如下：从 IE9 模式开始，网页无法显示多种文档模式。例如，考虑一个基于标准的网页，该网页包含一个以 quirks 模式显示内容的框架元素。IE9 模式以标准模式显示子框架（因为父文档处于标准模式）。根据我的测试，这是不正确的；我的示例在 IE9 中按需要工作：主页处于标准模式，框架页面处于 quirk 模式。[编辑]正如评论中指出的，它是几乎标准模式（即，不是经典的怪癖模式），有自己的渲染规则。