Question

考虑这个HTML：

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

这个CSS：

li:first-child { background: yellow; }

这个Javascript（jQuery）：

$("ul").append($("li:first-child"));

http://fiddle.jshell.net/Xtuaf/

当DOM发生变化时，显然在 Internet Explorer （8）:first-child中断。我在Javascript中为这个问题写了一个解决方法（在那里做样式;在我的情况下是z-index es）。这是一个丑陋的快速解决方案，我想摆脱。更好的解决方案是在DOM更改时强制重新应用样式表。可以这样做吗？或者还有其他解决方案可以解决这个问题吗？

Answer 1

在Internet Explorer中，可以通过设置类名来触发重排：

$("ul").append($("li:first-child")).addClass('x').removeClass('x');

或者只是（演示：http://fiddle.jshell.net/Xtuaf/1/）：

$("ul").append($("li:first-child"))[0].className += '';

Answer 2

可靠地导致整个DOM重排的一种方法是快速添加和删除body元素中的任意类。

$('body').addClass('foo').removeClass('foo');

强制在IE中重新应用样式表

2 个答案: