Question

我的问题类似于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高150px。在Chrome 17，Firefox 11和IE9中也是如此。显然这不是浏览器的怪癖。 HTML5规范中有一些内容表示您无法在iframe上设置左/右或上/下以设置高度。

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

Answer 1

它无法解决。这就是iFrame的制作方式。

如果你仍然想要达到相同的解决方案，那么你使用div作为绝对位置的包装器，你的顶部，左侧，右侧，底部。把你的iFrame宽度宽度：100％和高度：100％放入div中。

问题解决了。

Answer 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绝对定位，替换元素 // iframe
      10.3.9'内联块'，正常流量中的非替换元素
      10.3.10'内联块'，替换正常流中的元素

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

2 个答案: