Javascript IE中div的jQuery重新加载列表后添加的额外空间_Javascript_Jquery_Css_Internet Explorer

Javascript IE中div的jQuery重新加载列表后添加的额外空间

javascript jquery css internet-explorer

Javascript IE中div的jQuery重新加载列表后添加的额外空间,javascript,jquery,css,internet-explorer,Javascript,Jquery,Css,Internet Explorer,我正在编写一个网页，在选择某个内容时使用jQuery更新列表。列表下面是一个按钮。该更新在Firefox和Chrome中运行良好，但在IE中，每次更新时列表和按钮之间都会增加一点空间。下面是一个简化的示例，它做了同样的事情： <html> <head> <style type="text/css"> #list { padding: 10; }

我正在编写一个网页，在选择某个内容时使用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>


#名单{
填充：10；
}



1之前
2点之前



按钮


函数重载（）{
变量html=
“”+
“在1之后”+
“
在2之后”+
“”；
$（“div#list”）.html（html）；
}

点击按钮。在Firefox和Chrome中，它保持不变。在IE（9）中，每次我点击它时，它都会向下移动一点（一点意味着大约10或20像素。这对人眼来说很容易察觉）。谁能告诉我这是什么原因吗？谢谢。


#名单{
填充：10；
}

每次调用重新加载功能时，即添加10个填充，这是问题的原因。

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

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

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

根据jQuery文档

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

也许你应该尝试另一种方法。比如说

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

对我来说，它在IE9中看起来不错（我添加了一个验证程序来证明它，前后我都得到了46）：问题一定在别处。有趣。当我在JSFIDLE中运行它时，我也没有遇到问题。我还使用document.getElementById（'list'）.innerHTML=（等等）尝试了它，但遇到了相同的问题。让我们尝试一种不同的方法，然后，我用另一种可能工作方式不同的解决方案更新我的答案。我不确定这会有多大帮助，因为

$（html）

的工作方式是相同的（通过innerHTML）使用复杂的html字符串，如问题中的字符串。将填充从#list移动到#list ul修复了该问题（但将其保留为填充，而不是切换到边距）是的，看起来您最终将

#list

嵌套在原始

#list

中实际上，无论我将填充指定为10、50、100等，按钮的移动量都是相同的。不过，如果我将填充指定为0，则效果很好。

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