Question

如果您将 iframe 放在 div 中：

<div id="big-box">
    <iframe src="http://www.google.com" class="frame">
    </iframe>
</div>

并使用CSS来询问iframe占用所有可用的屏幕区域：

#big-box {
    background-color: #aaf;
}

.frame {
    border: medium none;
    height: 100%;
    width: 100%;
}

它在Chrome上运行完美（12.07）但在Firefox（3.6.17）上失败了。 This demo显示在Chrome中整个JSFiddle区域包含 iframe ，但如果您在Firefox中尝试此示例， iframe 将占用所有宽度，但不是所有高度

另请注意，如果您修复 big-box 的宽度和高度，它可以正常工作，但这不是重点（我无法更改）。关键是为什么这种不兼容性以及如何解决它（总是像Chrome一样）。

Answer 1

最新版本的谷歌浏览器（14.0.835）以与最新版本的Firefox（3.6.23）和最新版本的IE（9.0.3）完全相同的方式显示小提琴。因此，您可以看到Google Chrome首先应该“正确”完成它。它错误地显示了你想要的东西......

将position: absolute;添加到.frame的样式将实现您的目标。它适用于所有三种提到的浏览器。

这是小提琴：jsfiddle.net/Q5mt5/1

Answer 2

取自Dennis'jsFiddle我认为你可以这样做：

html, body
{
    width: 100%;
    height: 100%;
    padding:0px;
}
div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

iframe {
    height: 100%;
    width: 100%;
}

jsfiddle适用于Firefox 4和Chrome 14 （很遗憾，这就是我和我一起来的所有内容。）

Answer 3

Firefox在这里是正确的。默认情况下，iframe是内联替换元素，因此它位于基线上。如果将display: block;添加到框架类的样式中，则它将遵循块大小调整规则并完全覆盖div。

iframe里面的DIV不兼容Chrome-Firefox

3 个答案: