我正在生成的表单中有几个区域，我使用 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>
谢谢
伊恩
最佳答案
这似乎是由第二个列表周围的 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>
关于Jquery IE8 Dom操作无法扩展元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1272574/