【问题标题】：iFrame Not Loading IE 8 [duplicate]iFrame 未加载 IE 8 [重复]
【发布时间】：2013-07-29 14:52:20
【问题描述】：

我的网站似乎可以在除 IE 8 之外的所有浏览器中运行。iFrame 可以正常加载所有内容。

这是我的 HTML 代码：

<head>
   <title> Title </title>
   <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
   <script type="text/javascript" src="respond.min.js"></script>
</head>

<body>
    <iframe src="http://instagram.com/p/cR5BORA8Ij/embed/" 
            width="300" height="400" frameborder="0" 
            scrolling="no" allowtransparency="true" id="myFrame"></iframe>      
</body>

关于我可能做错的任何建议？

【问题讨论】：

您使用的是正确的文档类型吗？是否有控制台错误？

标签： html css iframe internet-explorer-8 internet-explorer-9

【解决方案1】：

这是一个完整的细分：

复制步骤：

创建一个在html 元素上包含position:relative 的页面

<html style="position:relative">
    <head></head>
    <body>TEST</body>
</html>

这是 fiddle 中的一个测试页面，它就是这样做的：

http://jsfiddle.net/KyleMit/DZbt5/show/light

现在在 iFrame 中使用该页面并在 IE8 中打开

<html>
    <head></head>
    <body>
        <iframe src="http://jsfiddle.net/KyleMit/DZbt5/show/light/"></iframe>
    </body>
</html>

Here's a fiddle that should work in all browsers EXCEPT IE8

解决方案：

正如上一个答案所暗示的，您可以从原始 html 页面中删除 position:relative，但您可能无法访问该页面或无法更改它。

相反，您可以简单地将相对位置添加到iframe 元素本身：

iframe {
    position: relative;
}

Working Demo in Fiddle - Also works in IE8

其他实例

这里也有人问过问题：

【讨论】：

有时，iframe 包含页面信息，但会被压缩。在这种情况下，iframe 应该具有 min-height, min-width 值才能遇到该问题

【解决方案2】：

来自问题iFrame content doesn't show in IE8：

只需从 iframed 内容中删除以下规则：

html { position: relative; }

【讨论】：