在 IE 中,怪癖模式页面中的 IFrame 也处于怪癖模式

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

只是想确保这一点有记录。 我认为最重要的教训是

如果您正在使用 HTML5 创建页面,并且您认为有人可能通过 iframe 将此页面嵌入到另一个页面上的可能性很大,则应为所有版本的 IE 在其上使用 HTML5 shim。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以下是情况说明。 假设您正在使用 HTML5 来构建您的页面,就像您应该做的那样。 您应该使用 HTML5 shim,并且您的 条件注释 用于 IE 8 及更低版本,这是有道理的,因为 IE 9+ 支持 HTML5。 然后,有人通过 iframe 将该页面嵌入到另一个处于怪癖模式的页面中(例如,如果他们忘记或弄乱了 <!DOCYTPE html>)。 您的页面将在该页面上的怪癖模式下呈现,并且您应用于 HTML5 元素的所有 CSS 都将无法正常工作,您的页面将看起来很糟糕。

shim 不会修复怪癖模式,但至少它会确保您所有的 CSS 都能正常工作。

这里有一个 测试页面。 在 IE 9 或 10 中加载以查看问题。

但是克里斯‽

为什么你的页面会处于怪癖模式? 好吧,我和你不会。 但你无法控制互联网上的每个页面。

Wufoo,我们允许表单通过 iframe 嵌入到第三方网站上,以及 使用 HTML5。 我们最近不得不更改为在所有版本的 IE 上加载 shim,因为出现了这个问题。

这对任何可能通过 iframe 嵌入的页面都有影响。 想到的例子:日历,就像您可以嵌入 Google 日历一样。 Campfire 聊天。 一般的可嵌入小部件。 Flickr 幻灯片。 其他表单,如 DispatchPolldaddy 的民意调查。 Twitter 和 Facebook 按钮通过 iframe 传递。 只是冰山一角。

对于 IE 团队

这可以修复吗? 在 IE 10 平台预览中也是这样。 让人不安的是,人们可以将您的内容嵌入 iframe 中,并让它看起来完全乱七八糟,而这并非您的过错。