为什么不能使用 iframe 绝对定位来设置高度/宽度答案

【问题标题】：why can't you use iframe absolute positioning to set height/width为什么不能使用 iframe 绝对定位来设置高度/宽度
【发布时间】：2012-04-05 08:47:19
【问题描述】：

我的问题类似于IFRAME and conflicting absolute positions，但我特别想知道为什么您不能在 iframe 中同时设置左/右或上/下并使其工作。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px;   border: 1px solid black;}
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px;  border: 1px solid black;}
</style>
</head>
<body>
<iframe></iframe>
<div></div>
</body>
</html>

div 占据了整个浏览器的高度。 iframe 高 150 像素。在 Chrome 17、Firefox 11 和 IE9 中也是如此。显然这不是浏览器的怪癖。 HTML5 规范中有一些内容说您不能在 iframe 上同时设置左/右或上/下以设置高度。

iframe（与 div 相比）有什么特别之处？

【问题讨论】：

标签： css html iframe

【解决方案1】：

它只是行不通。这就是 iFrame 的制作方式。

如果您仍想达到相同的解决方案，那么您可以使用 div 作为具有绝对位置的包装器，即上、左、右、下。将您的 iFrame width width:100% 和 height:100% 放入该 div。

问题解决了。

【讨论】：

这没有回答问题，OP 并不是在寻求解决问题的方法，而是解释为什么不能绝对定位 iframe。

【解决方案2】：

iframe 是 "replaced elements"。

这些元素的处理方式与非替换元素不同。不赘述，只看规范的目录：http://www.w3.org/TR/CSS21/visudet.html

10.3 计算宽度和边距
10.3.1 内联、不可替换的元素
10.3.2 内联、替换元素
10.3.3 正常流程中的块级、非替换元素
10.3.4 正常流程中的块级替换元素
10.3.5 浮动的、不可替换的元素
10.3.6 浮动，替换元素
10.3.7 绝对定位，非替换元素 // div
10.3.8 绝对定位，替换元素 //内嵌框架
10.3.9 'Inline-block'，正常流程中的非替换元素
10.3.10 'Inline-block'，替换正常流程中的元素

【讨论】：