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操作未能擴大元素

回答

相關問題