IE8 jQuery的DOM操作未能扩大元素

我在我生产形式几个方面，我使用jQuery appendTo我创建了一个DOM元素并将其向下滑动如下：IE8 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>

的

感谢，

伊恩

来源

2009-08-13 madcapnmckay

我们可以得到一个附加HTML的样本/表示，以及附加到的HTML。 – 2009-08-13 16:28:58

这似乎是由周围的第二列表中的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>

来源

2009-08-14 16:37:12 madcapnmckay

IE8 jQuery的DOM操作未能扩大元素

回答

相关问题