Jquery IE8 Dom 操作无法扩展元素答案

【问题标题】：Jquery IE8 Dom manipulation fails to expand elementsJquery IE8 Dom 操作无法扩展元素
【发布时间】：2009-08-13 15:08:21
【问题描述】：

我正在生成的表单中有几个区域，我使用 jquery 附加到我创建的 dom 元素并将其向下滑动，如下所示：

function createForm(event) {

   var input = $(event.data.element);
   var name = input.val();

   input.attr("disabled", true);
   input.parent().parent().fadeOut("slow", function() {
   $.get('<%=Url.Action("GetForm", "Controller") %>', { name: name },
             function(data) {
                var parentList = input.parent().parent().parent();
                var listCollection = $(data);

                listCollection.hide();
                listCollection.appendTo(input.parent().parent().parent()).slideDown("slow");

                $("#cancel_create").bind("click", { element: input }, revertForm).css({ "cursor": "pointer" });
             }, "html");
   });
}

这会获取要显示的 html 并将其附加到父列表中。在 FF 和 Chrome 中完美运行。在 IE8 中，它会正确插入元素，但不会扩展列表周围的 div，因此新项目似乎溢出。如果我专注于另一个元素，它会突然扩展，如果我打开开发者工具，它必须触发重绘并且 div 会扩展。

这是一个错误吗？

编辑：

对不起，我真的应该包括这个。插入前的html

<li> <!-- This is failing to expand -->
    <h3>3</h3>
    <div class="container">
        <ul> <!-- This is parentList -->
            <li><input id="state1" name="Foo1" type="text" value="" /></li>
            <li><input id="state2" name="Foo2" type="text" value="" /></li>
            <li><input id="state3" name="Foo3" type="text" value="" /></li>
        </ul>
    </div>
<li>

我正在返回一些额外的列表元素并将它们附加到 parentList。

<li><input id="state4" name="Bar1" type="text" value="" /></li>
<li><input id="state5" name="Bar2" type="text" value="" /></li>
<li><input id="state6" name="Bar3" type="text" value="" /></li>

谢谢，

伊恩

【问题讨论】：

我们能否得到一个被附加的 HTML 的样本/表示，以及被附加到的 HTML。

标签： jquery dom internet-explorer-8

【解决方案1】：

这似乎是由第二个列表周围的 div 引起的。我将页面简化为基本内容，然后删除了容器并展开了。

这很奇怪，因为容器 div 本身确实会正确展开，它只会影响其父元素的展开。它和标题元素都设置为 display:inline-block ，这似乎是原因。

我创建了一个小的自包含文件来演示。在 FF/Chrome 中打开，然后在 IE8 中进行比较。如果有人有解释，那么很高兴听到哪个是正确的行为。我知道我的钱在哪。

<!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">

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
</head>  

<body>
<ul id="list1">
        <li>ListA</li>
        <li>ListB</li>
        <li style="background-color: Yellow">
            <div style="display: inline-block">
            <ul id ="list2">
                <li>SubList1</li>
                <li id="clickme">Click Me</li>
            </ul>
            </div>
        </li>
    </ul>
<p>In IE8 the content overflows and list1 does not expand. Try double clicking one of the ExtraSubLists and it jumps back into place.</p>



<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function() {
            var div = $("<li>ExtraSubList</li>");
            div.hide();
            div.appendTo("#list2").slideDown("slow");
        });
    });
</script>

</body>
</html>

【讨论】：