DIV 内的 iframe 不兼容 Chrome-Firefox

发布于 2024-12-09 02:33:46 字数 714 浏览 7 评论 0原文

如果您将 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) 上运行完美，但在 Chrome (12.07) 上运行失败火狐 (3.6.17)。此演示显示，在 Chrome 中，整个 JSFiddle 区域包含 iframe ，但如果您在 Firefox 中尝试此示例，iframe 将占据所有宽度，但不是所有高度。

另请注意，如果您修复 big-box 的宽度和高度，它会起作用，但这不是重点（我无法更改它）。重点是为什么会出现这种不兼容性以及如何修复它（始终像 Chrome 一样进行）。

原文

If you put an iframe inside a div:

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

And use CSS to ask the iframe to occupy all the available screen area:

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

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

It works perfect on Chrome (12.07) but it fails on Firefox (3.6.17). This demo shows that in Chrome the entire JSFiddle area contains the iframe, but if you try this sample in Firefox the iframe will occupy all width, but not all height.

Note also that if you fix width and height for big-box it works, but this is not the point (I can't change this). The point is why this incompatibility and how to fix it (do always as Chrome does).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稍尽春風 2024-12-16 02:33:46

最新版本的 Google Chrome (14.0.835) 显示小提琴的方式与最新版本的 Firefox (3.6.23) 和最新版本的 IE (9.0.3) 完全相同。所以你可以看到，谷歌浏览器一开始就不应该“正确”地做到这一点。它错误地显示了您想要的内容...

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

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

回复收藏 0 原文

極樂鬼 2024-12-16 02:33:46

取自 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 上运行（抱歉，我的 atm 上只有这些。）

taking from Dennis' jsFiddle I figured you can do:

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

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

jsfiddle works in Firefox 4 and Chrome 14 (sorry thats all I have here with me atm.)

回复收藏 0 原文