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

我的问题类似于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)？

最佳答案

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

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

问题已解决。

关于css - 为什么不能使用iframe绝对定位来设置高度/宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9794359/