html - iframe 在 Chrome 中无法正确调整大小

Question

我有一个 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 也会调整大小。

与 Safari 结果相比，在 Chrome 中，该元素看起来缩短了很多:

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

我的 iframe 设置是否缺少某些 Chrome 不喜欢的东西？感谢您的建议。

Answer 1

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

我将 iframe 包装在一个 DIV 中并添加了参数“display:block;”以及 div 和 iframe 标签的“position:absolute”。我认为那两个是罪魁祸首。 (还为 iPad 添加了额外的 webkit FS)

就像一个魅力!