0

要素を静的 html テキストとして配置しようとするとすべてが機能しますが、実行時に要素 (サーバーからのデータの配列) を配置しようとすると、absolute. 再現する最も簡単な例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Positioning</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px }
        div { border: 1px solid black }
        .div5 { float: left; width: 300px; height: 300px; }
        .div6 { width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; background-color: #F5D8C1 }
        .div9 { width: 20px; height: 20px; position: absolute; bottom: 20px; left: 20px; background-color: #D8F5C1 }
    </style>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" language="JavaScript">
        function setDivValue($divId, $value)
        {
            var divL = document.getElementById($divId);
            if (divL)
                divL.innerHTML = $value;
        }

        var rtext = "<h1>Position absolute test</h1>";
        for (var i = 0; i < 10; i++){
            rtext +=    "<div class='div5' id='" + i + "'>" +
                            "<div class='div6'>div6</div>" +
                            "<div class='div9'>div9</div>" +
                        "</div>";
        }
        setDivValue("content", rtext);
    </script>
</body>
</html>

親要素div5ではなくdiv6とdiv9を配置しますが、FF 20とIE 8の両方でウィンドウに配置します（ブラウザ関連のバグではないようです）。

それを解決することは可能ですか？たとえば、画像を div6 に配置し、テキストを画像の左上隅 (内側) の真上に div9 に配置する必要があります。

4

1 に答える 1