Html 标准模式下的主网页，兼容模式下的 iframe：有什么问题吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18976213/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Main web page in standard mode, iframe in compatibility mode: any issues?
提问by noseratio
We have some legacy HTML content which we must render in compatibility mode. The requirement comes from our customers who want their HTML-based reports (some of which were created back in IE6 days) to look and print exactly the same, regardless of the browser version or underlying technologies. At the same time, we want to use Standard Mode and HTML5 for the rest of our web app.
我们有一些必须在兼容模式下呈现的遗留 HTML 内容。需求来自我们的客户，他们希望他们的基于 HTML 的报告（其中一些是在 IE6 时代创建的）看起来和打印完全相同，无论浏览器版本或底层技术如何。同时，我们希望在 Web 应用程序的其余部分使用标准模式和 HTML5。
An obvious solution is to host the legacy content in an <iframe>in compatibility mode. The following appears to work cross-browser:
一个明显的解决方案是以<iframe>兼容模式托管旧内容。以下似乎可以跨浏览器工作：
main.html(in standard mode):
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(in compatibility mode):
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>
Note the difference in rendering the table, using the same CSS:
请注意table使用相同 CSS呈现 的不同之处：
My question to experienced web developers: is this a supported scenariowhich can be used in production environment (IE8+ mostly, but occasionally Safari/Chrome/Firefox)? Is there a better way of doing this?
我对有经验的 Web 开发人员的问题是：这是一个可以在生产环境中使用的受支持场景吗（主要是 IE8+，但偶尔也有 Safari/Chrome/Firefox）？有没有更好的方法来做到这一点？
I've stumbled upon a related, albeit opposite question, which left me with mixed feelings.
我偶然发现了一个相关但相反的问题，这让我心情复杂。
[UPDATE](based on the comments):
[更新]（基于评论）：
All JavaScript resides inside the main page and appears to work just fine. What's interesting (and great!), the inner frame's view is rendered in compatibility mode, yet standard mode features are available for its DOM(at least, when accessed from the main page). E.g. document.getSelectionworks (and does cross-browsers, too).
所有 JavaScript 都驻留在主页面中，看起来工作得很好。有趣的是（而且很棒！），内部框架的视图以兼容模式呈现，但标准模式功能可用于其 DOM（至少，当从主页访问时）。例如document.getSelection可以工作（也可以跨浏览器）。
By supported scenarioI mean any endorsement by W3C HTML and DOM standards. So far I haven't found a definitive answer to this. This behavior may as well be just a nice side effect, although the fact it works cross-browsers is promising.
通过支持的情况下我的意思是由W3C HTML和DOM标准的任何认可。到目前为止，我还没有找到明确的答案。这种行为也可能只是一个很好的副作用，尽管它跨浏览器工作的事实很有希望。
MSDNsays the following: As of IE9 mode, webpages cannot display multiple document modes. For example, consider a standards-based webpage that contains a frame element that displays content in quirks mode. IE9 mode displays the child frame in standards mode (because the parent document is in standards mode).According to my tests, this is not true; my sample works as desired in IE9: the main page is in standard mode, the frame page is in quirk mode. [EDITED]As pointed out in the comments, it is the Almost Standard Mode(i.e., not the classic quirk mode), with its own rendering rules.
MSDN说明如下：从 IE9 模式开始，网页无法显示多种文档模式。例如，考虑一个基于标准的网页，其中包含一个以 quirks 模式显示内容的框架元素。IE9 模式以标准模式显示子框架（因为父文档处于标准模式）。根据我的测试，这不是真的；我的示例在 IE9 中按预期工作：主页处于标准模式，框架页面处于怪癖模式。[已编辑]正如评论中所指出的，它是几乎标准模式（即，不是经典的怪癖模式），具有自己的渲染规则。
采纳答案by o.v.
As of IE9 mode, webpages cannot display multiple document modes. For example, consider a standards-based webpage that contains a frame element that displays content in quirks mode. IE9 mode displays the child frame in standards mode (because the parent document is in standards mode).
According to my tests, this is not true; my sample works as desired in IE9: the main page is in standard mode, the frame page is in quirk mode.
从 IE9 模式开始，网页无法显示多种文档模式。例如，考虑一个基于标准的网页，其中包含一个以 quirks 模式显示内容的框架元素。IE9 模式以标准模式显示子框架（因为父文档处于标准模式）。
根据我的测试，这不是真的；我的示例在 IE9 中按需要工作：主页处于标准模式，框架页面处于怪癖模式。
Not quite; when your sample works as desired it's actually displayed in a single display mode, with quirks mode emulatedfor the frame content. You shouldn't care about the underlying mechanics as long as the resulting output matches what you were after, although there is some anecdotal evidence of differences between emulated and native modes (mostly to do with js DOM manipulation).
不完全的; 当您的示例按需要工作时，它实际上以单一显示模式显示，并为框架内容模拟了quirks 模式。只要结果输出与您所追求的匹配，您就不应该关心底层机制，尽管有一些轶事证据表明模拟模式和本机模式之间存在差异（主要与 js DOM 操作有关）。
I'd be a bit more concerned about how IE10+ would handle such fringe scenarios:
我会更关心IE10+ 如何处理这种边缘场景：
Starting with IE11 Preview, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.
从 IE11 预览版开始，文档模式已被弃用，不应再使用，除非是临时使用。确保更新依赖旧功能和文档模式的站点以反映现代标准。
Ninja edit:looks like this has already been resolved on SO; modifying the accepted solution to your needs you should omit Doctype and add <meta http-equiv="X-UA-Compatible" content="IE=5" />; X-UA-Compatibilitycorrectly defined as per msdn spec
Ninja 编辑：看起来这已经在 SO 上解决了；根据您的需要修改已接受的解决方案，您应该省略 Doctype 并添加<meta http-equiv="X-UA-Compatible" content="IE=5" />; X-UA-Compatibility按照msdn 规范正确定义
回答by Luke
This is a pseudo-answer to your slightly non-specific question;
这是对您稍微不具体的问题的伪答案；
In regards to your apprehension to rely on this IE feature for "back-compatibility", I feel the same way. Microsoft has provided this option because there are lots of companies out there who take a long time to update their web content. This option is meant to allow them to have a quick and dirty stop-gap, not a permanent solution.
至于您担心依靠 IE 功能实现“向后兼容”，我也有同样的感觉。Microsoft 提供此选项是因为有很多公司需要很长时间来更新其 Web 内容。这个选项是为了让他们有一个快速而肮脏的权宜之计，而不是一个永久的解决方案。
So, what's the permanent solution? If that is your question, then IMO this is the answer; don't rely on the stop-gap and develop the correct output for the reports.
那么，什么是永久解决方案？如果这是您的问题，那么 IMO 这就是答案；不要依赖权宜之计并为报告开发正确的输出。
Without knowing what those reports are it is impossible to properly advise you on that part, but here's a stab in the dark:
如果不知道这些报告是什么，就不可能在这方面给你适当的建议，但这里有一个暗中刺伤：
There are lots of options to convert "HTML" to PDF. (I put HTML in quotations because each rendering engine is bound to require different versions/standards of HTML and you'll need to know those assumptions before you pick one.) If you want output that will format 100% the same on any browser, then you want a format that is meant to be static and not change; like PDF. Plus, then you also have the printing options taken care of as well.
有很多选项可以将“HTML”转换为 PDF。（我将 HTML 放在引号中，因为每个渲染引擎都必然需要不同版本/标准的 HTML，并且您需要在选择之前了解这些假设。）如果您希望输出格式在任何浏览器上 100% 相同，那么你想要一种静态且不会改变的格式；像PDF。此外，您还可以处理打印选项。
