Forcing to re-apply a style sheet in IE

问题

Consider this HTML:

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

This CSS:

li:first-child { background: yellow; }

And this Javascript (jQuery):

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

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

Apparently in Internet Explorer (8) :first-child breaks when the DOM has changed. I wrote a workaround for this problem in Javascript (doing styling there; z-indexes in my case). It's an ugly quick fix that I want to get rid of. A better solution would be forcing to re-apply the style sheet when the DOM changes. Can this be done? Or is there an other solution to this problem?

回答1:

In Internet Explorer, a reflow can be triggered by setting the class name:

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

Or just (demo: http://fiddle.jshell.net/Xtuaf/1/):

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

回答2:

One way to reliably cause a reflow of the entire DOM is to quick add and remove an arbitrary class from the body element.

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

来源：https://stackoverflow.com/questions/12936881/forcing-to-re-apply-a-style-sheet-in-ie