Question

我在一个表格中有一些区域，我正在使用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>

谢谢，

伊恩

Answer 1

这似乎是由第二个列表周围的div引起的。我将页面剥离为基础并移除了容器并展开。

这很奇怪，因为容器div本身确实正确扩展它只影响其父元素扩展。它和heading元素都设置为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>

Jquery IE8 Dom操作无法扩展元素

1 个答案: