爲什麼你不能使用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絕對定位來設置高度/寬度

回答

相關問題