Html ie8错误：固定位置div，内部相对位置div，内部相对位置浮动div。。。不渲染_Html_Css_Internet Explorer 8

Html ie8错误：固定位置div，内部相对位置div，内部相对位置浮动div。。。不渲染

html css internet-explorer-8

Html ie8错误：固定位置div，内部相对位置div，内部相对位置浮动div。。。不渲染,html,css,internet-explorer-8,Html,Css,Internet Explorer 8,这个HTML不能在IE8中正确呈现。它适用于Firefox、Opera、IE7、IE9和IE10。（当然，它在IE6中也不起作用，因为它涉及固定位置元素。）实际上，它在Chrome中又做了一些不同的事情我能想到的最狭隘的测试用例是： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

这个HTML不能在IE8中正确呈现。它适用于Firefox、Opera、IE7、IE9和IE10。（当然，它在IE6中也不起作用，因为它涉及固定位置元素。）

实际上，它在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>


测试
div{
宽度：100px；
高度：100px；
}

在IE8中，最里面的div（绿色的一个）忽略了祖父母div（红色的一个）的50像素左缩进，即使是直接父级div（蓝色的一个）也考虑到了这一点。奇怪的虫子

只有当div以这种方式双重嵌套时，以及祖父母浮动时，才会发生这种情况。如果移除浮动，则它将呈现OK。（但是，我需要将其浮动，因此这不是我的解决办法。）

编辑

我最初以为我已经在Chrome上测试过了，但实际上Chrome做的完全不同

我不知道哪个浏览器是正确的。

这里没有bug。绿色div有“position:fixed”，它相对于浏览器窗口定位元素，而不相对于其他元素定位自身

我猜你想让绿色的div相对于蓝色的div定位，对吗？

然后在绿色div上使用“position:absolute”。

为什么要尝试对相对元素使用像top和left这样的绝对属性？top和left应用于相对位置元素。如果要对某个元素进行绝对位置，请指定position:absolute。将相对元素与绝对属性混合将使渲染流程复杂化并产生意外结果。我不想使用绝对定位。顶部和左侧不是绝对属性，它们应用于相对位置元素以及绝对位置元素。