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

【问题标题】：Forcing to re-apply a style sheet in IE强制在 IE 中重新应用样式表
【发布时间】：2012-10-17 14:41:34
【问题描述】：

考虑一下这个 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) :first-child 在 DOM 更改时中断。我用 Javascript 为这个问题写了一个解决方法（在那里做样式；在我的例子中是z-indexes）。这是我想摆脱的丑陋快速修复。更好的解决方案是在 DOM 更改时强制重新应用样式表。这可以做到吗？或者这个问题有其他解决方案吗？

【问题讨论】：

标签： javascript css internet-explorer

【解决方案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 += '';

【讨论】：

【解决方案2】：

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

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

【讨论】：