Question

我正在编写一个网页，在选择某些内容时使用jQuery更新列表。列表下方是一个按钮。此更新在Firefox和Chrome中运行良好，但在IE中，每次更新时，列表和按钮之间会添加一些空间。以下是一个简化的示例，它执行相同的操作：

<html>
    <head>
        <style type="text/css">
            #list {
                padding: 10;
            }
        </style>

        <script type="text/javascript" src="jquery.js"></script>
    </head>

    <body>
        <div id="test">
            <ul>
                <!-- List -->
                <li>
                    <div id="list">
                        <ul>
                            <li>before 1</li>
                            <li>before 2</li>
                        </ul>
                    </div>
                </li>

                <!-- Button -->
                <li>
                    <div>
                        <button id="button" onClick="reload();">button</button>
                    </div>
                </li>
            </ul>
        </div>
    </body>

    <script type="text/javascript">
    function reload() {
        var html = 
            "<ul>" +
                "<li>after 1</li>" +
                "<li>after 2</li>" +
            "</ul>";

        $("div#list").html(html);
    }
    </script>
</html>

单击按钮。在Firefox和Chrome中，它保持不变。在IE（9）中，每次单击它时，它会向下移动一点（有点意味着大约10或20个像素。人眼很容易注意到）。有谁能告诉我是什么原因造成的？感谢。

Answer 1

    <style type="text/css">
        #list {
            padding: 10;
        }
    </style>

每次调用重新加载函数时，IE都会添加10个填充，这是导致问题的原因。

Answer 2

<强>更新似乎问题与IE填充计算有关，而不是与您的代码有关，因为直接使用js .innerHtml（）会发生同样的情况。

然后我建议删除填充并向ul添加边距，因为它会影响你要删除的元素，也可能这次删除边距。

#list {
    padding: 0;
}
#list ul {
    margin:10;
}

http://jsfiddle.net/qEphF/6/

根据jQuery docs

此方法使用浏览器 innerHTML属性。有些浏览器可能没有完全生成一个DOM 复制提供的HTML源代码。

也许你应该尝试不同的方法。例如

$("div#list").empty().append($(html));

在IE中jQuery重载div的列表之后添加了额外的空间

2 个答案: