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

我的问题类似IFRAME and conflicting absolute positions，但我特别想知道为什么你不能在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>

该div占用了浏览器的全部高度。 iframe高150px。 Chrome 17，Firefox 11和IE9也是如此。显然，这不是浏览器的怪癖。 HTML5规范中有一些内容说明，为了设置高度，您不能在iframe上设置左/右或顶部/底部。

有什么特殊的I帧（与div的）？

来源

2012-03-20 mhenry1384

iFrame是"replaced elements"。

这些比非替换元素区别对待。没有进入细节，只是看的内容规范的表：http://www.w3.org/TR/CSS21/visudet.html

10.3计算宽度和利润率
10.3.1行内的非替换元素
10.3.2内联，替换元素
10.3 0.3块级，在正常流动的非替换元素
10.3.4块级，替换元素在正常流动
10.3.5浮动，非替换元素
10.3.6浮动，替换元素
10.3.7绝对定位，非替换元素 // DIV
10.3.8绝对定位，替换元素 // iframe中
10.3.9“内联块”，在正常流量
非替换元素 10.3.10“inline-block的”，取代了正常流动的元素

来源

2012-03-20 23:40:32 user123444555621

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

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

问题解决。

来源

2012-03-20 21:11:43

这不回答这个问题，OP不是寻求解决问题的办法，而是一个解释，为什么一个iframe不能绝对定位。 – 2018-01-31 01:29:38

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

回答

相关问题