Question

此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>

在IE8中，最内层的div（绿色的）以某种方式忽略了祖父母div（红色）的50px左缩进，即使是直接父（蓝色）也考虑到了它。奇怪的错误！

只有当div以这种方式双重嵌套时才会发生，并且只有当祖父母浮动时才会发生。如果我删除浮动，那么它呈现OK。（但是，我需要它浮动，所以这对我来说不是一种解决方法。）

修改

我最初认为我在Chrome中对此进行了测试，但实际上Chrome完全不同。

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

Answer 1

这里没有错误。绿色div具有'position：fixed'，这将元素相对于浏览器窗口定位，它不会相对于其他元素定位。

我的猜测是你希望绿色div相对于蓝色div定位，对吧？然后在绿色div上使用'position：absolute'。

ie8 bug：固定位置div，内部相对位置div，内部相对位置浮动div ...不呈现

1 个答案: