1

此 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 以这种方式双重嵌套时才会发生，并且只有当祖父母浮动时才会发生。如果我删除浮动，那么它会呈现好的。（但是，我需要它浮动，所以这对我来说不是一个解决方法。）

编辑

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

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

4

1 回答 1

0

这里没有错误发生。绿色 div 具有“位置：固定”，这将元素相对于浏览器窗口定位，它不会相对于其他元素定位自身。

我的猜测是您希望绿色 div 相对于蓝色 div 定位，对吗？然后在绿色 div 上使用“位置：绝对”。

于 2012-11-17T17:05:33.623 回答