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) は、祖父母の div (赤の div) の 50 ピクセルの左インデントを何らかの形で無視し、直接の親 (青の div) でさえも考慮します。奇妙なバグ！

これは、div がこのように二重にネストされている場合にのみ発生し、祖父母がフローティングされている場合にのみ発生します。フロートを削除すると、問題なくレンダリングされます。（ただし、フローティングする必要があるため、回避策ではありません。）

編集

最初はこれを Chrome でテストしたと思っていましたが、実際には Chrome はまったく別のことを行います。

どのブラウザが実際に正しいかはわかりません。

4

1 に答える 1

0

ここにはバグはありません。緑色の div には「position: fixed」があり、これにより要素がブラウザー ウィンドウに対して相対的に配置されます。他の要素に対して相対的に配置されることはありません。

私の推測では、緑色の div を青色の div に対して相対的に配置する必要がありますよね? 次に、緑色の div で「position: absolute」を使用します。

于 2012-11-17T17:05:33.623 に答える