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 ...不渲染

回答

相关问题