1

我正在尝试创建一个具有动态数量的表单的网页（以表示用户可以描述的项目列表。

我的大部分功能都在工作，但我希望动态添加的表单连续显示（如果需要，可以使用滚动条）我大部分时间都在工作。在 Firefox 中，它按预期工作，但在 IE9（在标准模式下）中，一旦内容强制滚动条显示在下方，对于添加的每个新项目，动态表单都会被向下推更多（如果我设置了溢出-x：滚动而不是比“自动”我不明白这一点）当滚动条最初出现时，我对视觉转变感到满意，但在那之后我不希望有进一步的转变。

精简示例：

<!DOCTYPE html>
<html>
<head>
<script>
    var next_id = 1;

    function maximize_width(element) {
        var w = 0;
        var c = element.firstChild;

        while (c) {
            if (!isNaN(c.offsetWidth)) {
                w += c.offsetWidth;
            }
            c = c.nextSibling;
        }
        element.style.width = w + "px";
    }

    function do_add() {
        var container = document.getElementById("container");
        var t = document.getElementById("template").cloneNode(true); //clone the template
        t.id = "item_" + next_id; //create a new unique id
        t.className = "item";
        next_id += 1;
        container.appendChild(t);
        maximize_width(container);
    }

</script>
<style>

#template{
    display:none;
}

#scroll-container {
    width: 100%;
    margin: 0px;
    overflow-x: auto;
    overflow-y: hidden;
}

#container{
}

.item{
    display:inline-block;
    margin: 0px;
    width: 200px;
    height: 200px;
    background-color: green;
}

</style>
</head>
    <body>
        <div id="scroll-container">
        <div id="container">
            <form id="template" class="template">
            </form>
        </div>
        </div>
    <button onclick="do_add()">Add</button>
    </body>
</html>
4

1 回答 1

1

这对您的标题添加还不够吗？

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

（我的 linux 工作站上没有 IE，但如果 doctype 已经正确，通常足以使 IE9 按预期工作）

于 2012-04-23T16:32:58.710 回答