logo标签列表

一个 iframe 在 quirks mode 下会被渲染吗？

internet-exploreriframerenderingquirks-mode
11

我正在设置一个网页，并且在不同浏览器上（实际上只是IE浏览器）无法得到良好的显示效果，我希望在认真考虑解决自IE6以来的旧问题之前先排除怪癖模式。容器页面已经声明了文档类型，但是iframe代码没有声明。iframe内容会以怪癖模式呈现（因为它没有文档类型），还是以标准模式呈现（因为容器有文档类型）？源码遵循以下方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
...
<body>
...
<iframe ...>
    <html>
    <head>
    ...
    </head>
    <body>
    ....
    </body>
    </html>
</iframe>
...
</body>
</html>
3个回答
23

在IE9之前，iframe中的网页会根据其自身的doctype进行渲染，而不是根据父容器的doctype进行渲染。然而，在IE9中，微软改变了行为，使得子iframe继承其doctype/渲染自父容器。

请注意，只要使用兼容性视图，IE9仍将按照传统方式（iframe遵循自己的doctype）运行。

您所处情况的最佳解决方法是编写符合标准的容器页面，但需要包含一个quirks模式页面的iframe，则应在父页面的doctype和开头的 <html> 标签之间添加以下任一元标记：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=8" />

这些标签会让IE9假装它是IE7或IE8，并包括用于确定子iframe的渲染模式的逻辑。这种解决方法的缺点是您将无法在父页面中使用IE9支持的任何新功能，但这可能比子页面出现严重的渲染错误更可取。

更多信息请参见http://web.archive.org/web/20110905060718/http://www.sitepoint.com/forums/html-xhtml-52/ie9-iframes-doctypes-you-743000.html

4
顺便说一下：不要再点赞这个了，听起来很好，但是它行不通。 - Stefan Steiger
虽然我同意这种方法并不适用于所有情况，但它确实减少了一些问题，并且值得被点赞。不幸的是，有时您无法控制 iframe 中包含的内容，因此无法控制其是否符合标准。我个人曾经遇到过一个问题，这种解决方案至少在其他应用程序更新为符合标准之前暂时解决了问题。 - nerdybeardo
@mikepr：不幸的是，这并不是首选方案。 - Stefan Steiger
如果您正在使用IE9，父页面是quirks模式，并且iframe具有doctype并指定了IE = Edge兼容性，那该怎么办？ - Scott Stafford
2
该外部链接不幸已经损坏。 - DannykPowell
显示剩余2条评论
15

CAVEAT EMPTOR

很遗憾，一些人没有注意到这个答案是在IE9存在很久之前发布并被接受的，这改变了问题的条件。通常我会删除它以避免再次捕获任何downvote（指反对票），但由于答案实际上仍然正确且令人遗憾地与浏览器人口统计中的大部分相关，我会将其保留。只是请不要再给它打下票了。

Quirksmode：IE将iframes呈现为单独的文档节点，不继承DOCTYPE，并且quirks是默认设置。

Edit: 某人演示了您的问题并证明了不继承（感谢我的书签:P）

然而，您选择了“Almost”作为您的doctype，这意味着iframes无论如何都不被允许。您唯一可以获得有效的iframes的方法是父级处于quirks模式，这使继承与否成为无意义的点。

建议阅读。

7
从IE9开始，文档类型（doctype）是会被继承的...你的困惑源于在IE8中，情况有所不同... - Stefan Steiger
1
同意Quandary的观点。我在IE10上遇到了同样的问题。无论在页面中指定什么，父文档类型都会向下传播到IFrame中（当单独打开该页面时，该页面呈现不同）。 - b.pell
2
我的“困惑”来自于答案比IE9早几个月。有帮助的做法应该是相应地进行编辑，但嘿，我猜反对票很有趣且容易，而阅读则需要技术。 - annakata
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接