只是想确保这一点有记录。 我认为最重要的教训是
如果您正在使用 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 幻灯片。 其他表单,如 Dispatch 或 Polldaddy 的民意调查。 Twitter 和 Facebook 按钮通过 iframe 传递。 只是冰山一角。
对于 IE 团队
这可以修复吗? 在 IE 10 平台预览中也是这样。 让人不安的是,人们可以将您的内容嵌入 iframe 中,并让它看起来完全乱七八糟,而这并非您的过错。
哇。 这真是一个令人沮丧的前景,要等待“人们”都至少使用 IE11。 即使是使用拨号上网的老奶奶。 克里斯,我们 2040 年见? :-P
我认为 Internet Explorer 的开发人员正在坐下来窃笑,因为那个浏览器一定是在开玩笑! 没有任何其他可能的解释。
我们能不能直接放弃 IE,这听起来是个很棒的主意。
放弃 IE,互联网上所有不断出现的问题都会得到解决(除了那些小问题,但那些大问题会被解决)。
或者至少像其他所有浏览器一样支持 CSS。 别再让我为你做特殊的事情,别再半途而废地支持一些东西。 IE 将我内心的最坏一面都激发出来了…
我通常会告诉人们,他们应该使用除 IE 之外的任何东西…… 以及他们获得的任何新电脑…… 在他们下载 FF 或任何其他浏览器后…… 他们应该立即删除 IE…… 只要你出示正在谈论的事情的证据…… 大多数人都会很高兴接受这个建议…… 实际上也确实会切换…… 当然,我只是一个人…… 但是…… 我可以想象,如果一大群开发者都给出相同的建议…… 如果开发者们都给出相同的建议,那么他们寻求的来自 IE 的改变会快得多……
放弃 IE? – IE 是什么? :-)
又是另一个消灭 IE 的理由。 记住孩子们,朋友不会让朋友使用 IE。
杀了它。 用棍子把它打死,直到它彻底消失。
直接使用 Modernizr 而不是 shiv。 它做的事情一样,并且增加了根据功能进行样式设置的好处。 谷歌没有将其托管在其 CDN 上,但它位于 cdnjs.com 上。
在 Chris 展示的使用案例中,shim 实际上是更好的选择,因为它专门用于支持不存在的元素。 如果您没有使用 Modernizr 的大量功能,那么使用它就有点过分了。
我必须指出:这是我一段时间以来见过的对 疑问惊叹号 的最佳使用。
感谢您提供链接,Marco(以及 @ChrisCoyier 和允许在评论中使用活动 URL 的相关人员)。 在此之前,我一直不知道疑问惊叹号。 通过阅读这篇文章,我学习了两件有价值的东西。
一般评论
关于 IE 和 Windows,无论喜欢与否,除 G20(也许甚至 G8 也是?)之外的大多数国家/地区的 Internet Explorer 用户比例都比美国和西欧高得多。 每当我查看中国网站,就像中华人民共和国,而不是台湾或新加坡,所有内容都只是针对 IE,包括个人网站开发人员的提示。 这就是为什么尽管令人伤心,但这仍然非常有用。
我一直在想 Modernizr 做了什么…… 它包含 shim,当然,我们包含它,没有条件注释,因为 Modernizr 不是专门针对 IE 的。 但是它是否只在 IE<9 内部“过滤”shim?
文档说“此脚本与流行的 html5shim/html5shiv 库中使用的脚本相同”,但它看起来实际上只在 IE<9 上运行,因此它无法修复此 iframe 问题。 悲伤。
这是一个要向 Modernizr 的开发者们提交的文件。
但 IE 不会很快消失,我们都知道这一点…… 所以我们必须尽我们所能处理此类问题。 从这个角度来看,感谢克里斯不断地出色工作,第一个为我们带来(糟糕的)消息。 在这个领域,这非常!重要(冷幽默,但现在是早上早些时候)
我也发现这是一个问题,而且我在工作中无法解决它。 团队坚持使用微软 Telerik 控件,它本身会动态地渲染 HTML 页面(即 iframe),而我无法控制初始标记和文档类型。 我已经删除了对 HTML5 的支持,但我将尝试一下,这很有道理。
真正有趣的是,就在两周前,我参加了微软自己举办的 HTML5 大会。 但他们并没有让任何人觉得容易!
真是出乎意料,又是 IE 的一个功能错误……
我要用柠檬烧毁他的房子!
IE 不是我们应该担心抵制的东西。 那不在我们的控制范围内。 但是,如果您要抵制什么,请抵制怪癖模式。 如果有人将您的网站嵌入到他们的页面中,而他们的页面使用的是怪癖模式,那么问题出在他们的代码上,修复的责任在他们身上。
我应该阅读整篇文章。 我没有意识到你的使用案例是嵌入的小部件。 请忽略上面的内容。
在我的世界里,更有可能遇到这种情况的反面,即我控制着外层框架(处于标准模式),试图嵌入一个开发为怪癖模式的网站。
我想为这个问题提交一个错误报告,但我发现已经有一些相关的报告,例如 https://connect.microsoft.com/IE/feedback/details/599022/canvas-element-unknown-in-iframe-if-no-doctype-on-parent-page-ie9p5
遗憾的是,微软将该错误关闭为 WONTFIX
他们在开玩笑,对吧?
真的吗?所以基本上...
“我们知道我们有问题,但选择什么也不做。如果你喜欢正常工作的产品,请不要使用我们的产品。谢谢。”
Windows 或 Mac 应该为所有用户提供一个服务包,其中包含具有 HTML5 兼容性的浏览器。
我不认为其他操作系统的用户会像他们一样喜欢支持 HTML5 的浏览器,尽管像 Ubuntu 这样的发行版确实很难让人不及时更新。我爸爸每年四、十月份都会抱怨这件事。(嗯,我发现了规律)
是时候实现一个点赞按钮了,Chris ><
只希望 EI 团队能看到这件事。
哦,测试页面真的很有帮助,谢谢分享这些技巧。
不错的文章,谢谢。
我想在文本上添加带浮动的样式。
怎么做?
我认为,开发者应该进行新的创新...
诸如兼容性之类的事情,是浏览器的任务,让它们通过我们的创新来改进自己的功能。
对于那些适应创新的人,脱颖而出。对于那些不适应 HTML5 创新的 IE,让它们消失吧。
Chris,我想提醒你一个打字错误。
“如果你正在使用 HTML5 创建页面,并且你认为可能有人会通过 iframe 在另一个页面上嵌入此页面,那么你应该在所有版本的 IE 上使用 HTML5 shim。”
应该是 HTML5 Shiv,而不是 HTML5 shim。
Shiv 和 shim 在这种奇怪的网络俚语中有点交替使用。Shim 更像是“正确”的,因为它像你在桌子腿下塞的东西来平衡它或类似的东西,一个快速修复。Shiv 是你在监狱里用来刺人的东西。但是当(我认为是 Resig?)发布关于这个想法的第一篇博客文章时,它被错误地命名为 shiv,而这个有趣的错误一直存在。
我认为应该是“...”。:)
抱歉,<!DOCYTPE html> 应该是 <!DOCTYPE html>
我似乎在一些 LMS 上遇到了问题。LMS 供应商尝试通过在框架集中放置标准的 doctype 来进行修复,但各个框架仍然具有不同的 doctype。
这也是已知问题吗?即使主框架和我的框架都处于标准模式,它似乎仍然运行在怪异模式下。由于 LMS 供应商花费了 2 周时间才应用上次修复,我非常希望能够应用任何修复来防止子框架上的怪异模式。