html - iFrame 未加载 IE 8

Question

我的网站似乎可以在除 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>

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

score 1 · Accepted Answer

这是一个完整的细分：

重现步骤：

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

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

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

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>

这是一个适用于除IE8 之外的所有浏览器的小提琴

解决方案：

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

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

iframe {
    position: relative;
}

小提琴中的工作演示 - 也适用于 IE8

其他实例

这里也有人问了问题：

score 0 · Accepted Answer

从问题iFrame content doesn't show in IE8：

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

html { position: relative; }