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

mhe*_*384 14 css iframe html5

我的问题类似于IFRAME和冲突的绝对位置,但我特别想知道为什么你不能在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>
Run Code Online (Sandbox Code Playgroud)

div占用了完整的浏览器高度.iframe高150px.在Chrome 17,Firefox 11和IE9中也是如此.显然这不是浏览器的怪癖.HTML5规范中有一些内容表示您无法在iframe上设置左/右或上/下以设置高度.

关于iframe(与divs)有什么特别之处?

Sve*_*der 23

它不会成功.这就是iFrame的制作方式.

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

问题解决了.

  • 这没有回答这个问题,OP没有寻求解决问题的方法,而是解释为什么iframe无法绝对定位. (2认同)

use*_*621 20

iframe是"替换元素".

这些处理方式与未替换元素的处理方式不同.无需详细说明,只需查看规范的目录: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'内联块',在正常流程中替换元素