iframe 在 Chrome 中无法正确调整大小答案

【问题标题】：iframe not sizing properly in Chromeiframe 在 Chrome 中无法正确调整大小
【发布时间】：2012-03-30 10:27:35
【问题描述】：

我有一个 iframe 元素，它在 Safari 5.1.5 中大小合适，但在 Chrome 中不合适。

这个元素的 CSS 是：

iframe {
  overflow: hidden; 
  width: 100%;
  height: 80%;
  border: 1px solid #DEDEDE;
  background: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}

HTML 是：

<iframe marginwidth="0" marginheight="0" scrolling="no" src="foo" height="80%" width="100%"></iframe>

在 Safari 中，元素看起来像预期的那样，如下所示：

如果我调整浏览器的大小，iframe 的大小也会调整。

在 Chrome 中，与 Safari 的结果相比，该元素看起来要短得多：

此外，调整浏览器窗口大小不会改变iframe 元素的大小。

我的 iframe 设置是否缺少某些 Chrome 不喜欢的内容？谢谢你的建议。

【问题讨论】：

iFrame的父元素是否有指定高度？
也许，我可能完全不在这儿了，chrome 占了 80% 的 80%，因为你在 iframe 和 css 中都指定了大小？
如果您使用的是 html5 文档类型，请删除边距高度、边距宽度和滚动，这些在 html5 中不受支持 w3schools.com/html5/tag_iframe.asp
父高度是浏览器窗口的高度。我正在使用 HTML 4 DOCTYPE。如果 Chrome 占 80% 的 80%，它的宽度会比 Safari 的窄，所以这似乎是一个错误的猜测。还有其他人吗？

标签： html css google-chrome iframe safari

【解决方案1】：

我想我在这里找到了解决方案，在 Mac 上的 Chrome 和 Firefox 上都遇到了同样的问题。

我将 iframe 包裹在 DIV 中并添加了参数“display:block;”以及 div 和 iframe 标签的“位置：绝对”。我认为那两个是罪魁祸首。（还为 iPad 添加了额外的 webkit FS）

像魅力一样工作！

【讨论】：