1

休眠行動について何かコメントはありますか?
互換モードの IE8 でテストしましたが、実際の IE7 の動作についてはわかりません。他のブラウザは正常に動作します。

ドキュメントがリフローすると、相対的に配置された画像の座標が失われます。
テキストが段落に追加された場合は動作が見られますが、さらに段落が追加された場合はそうではありません!

これを参照してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Bad Behaviour</title>
    <script type='text/javascript'>
        window.onload = function(){
            document.getElementById('command').onclick = function(){
                var p = document.getElementById('paragraph');
                p.innerHTML = p.innerHTML + p.innerHTML;
                return false;
            }
        }
    </script>
</head>
<body>
    <a id='command' href='?'>command</a>
    <p id='paragraph'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit
    anim id est laborum
    </p>
    <div style='background-color:black;'>
        <img src='success.png' style='position:relative; '/>
    </div>
</body>
</html>

リフロー後に画像がどのように表示されるかご覧ください。

4

1 に答える 1

3

IE7以下がこれを行う理由はわかりませんが、解決策はコンテナを提供することです

<div style='background-color:black;'>

相対位置、

<div style='background-color:black;position:relative;'>

これにより、この (および他の多くの) 問題が解決されます。実際、そうしない理由がない限り、すべてのコンテナーに IE の相対位置を与えるのが最善です。

于 2011-02-19T21:12:14.740 に答える