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

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/

显然在Internet Explorer 8中, 当DOM改变时:first-child会失效。我用JavaScript写了一个解决这个问题的方法（在这里进行样式处理；我的情况下是z-index）。这只是一个丑陋的快速解决办法，我希望能够摆脱掉它。更好的解决方案是在DOM改变后强制重新应用样式表。这可行吗？还是有其他解决此问题的方法？

- Jasper de Vries

Answer 1

在Internet Explorer浏览器中，可以通过设置类名来触发重新流动（reflow）：

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

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

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

- Rob W

Answer 2

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

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

- John Culviner