ie8錯誤：固定位置div，內部相對位置div，內部相對位置浮動div ...不渲染

此HTML不會在IE8中正確呈現。它適用於Firefox，Opera，IE7，IE9和IE10。（當然，它在IE6中不起作用，因爲它涉及固定位置元素。）ie8錯誤：固定位置div，內部相對位置div，內部相對位置浮動div ...不渲染

實際上，它在Chrome中又做了一些改變。

最窄的測試情況下，我能想出是：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>test</title> 
    <style> 
     div { 
      width: 100px; 
      height: 100px; 
      } 
    </style> 
</head> 

<body> 

<div style="background-color: red; position: relative; top: 50px; left: 50px; float: left;"> 
    <div style="background-color: blue; position: relative; top: 200px; left: 200px;"> 
     <div style="background-color: green; position: fixed; top: 0;"> 
     </div> 
    </div> 
</div> 

</body> 
</html>

在IE8中，最內層的div（綠色的），不知何故忽略祖父母div的50像素的左縮進（紅色的），即使是直接的父母（藍色的）也會考慮到這一點。奇怪的錯誤！

只有當div以這種方式雙重嵌套並且只有當祖父母被漂浮時纔會發生。如果我刪除浮動，那麼它呈現OK。（不過，我需要它來進行浮動，所以這不是我的解決方法。）

編輯

我最初以爲我已經在Chrome中測試了這個，但實際上Chrome並完全不同了。

我不知道哪個瀏覽器實際上是正確的。

來源

2012-11-15 Ale Petrucci

爲什麼你想使用絕對屬性如頂部和左邊的相對元素？ – Lowkase

頂部和左側也適用於相對位置元素 –

如果您想確定絕對位置，則指定position：absolute。用絕對屬性混合相關元素會使渲染流程複雜化併產生意想不到的結果。 – Lowkase

這裏沒有錯誤發生。綠色div的'位置：固定'，這相對於瀏覽器窗口定位該元素，它不相對於其他元素本身。

我的猜測是你想要綠色div被定位爲相對於藍色的div，對吧？然後在綠色div上使用'position：absolute'。

來源

2012-11-17 17:05:33

ie8錯誤：固定位置div，內部相對位置div，內部相對位置浮動div ...不渲染

回答

相關問題