如何在向dom元素添加类后强制ie8重新绘制

Question

在ie8中，如果在更改类名时元素没有“重绘”相关的css，如何才能强制浏览器刷新而不会降低ie8性能呢？

这篇文章(How can I force WebKit to redraw/repaint to propagate style changes?)建议调用强制重绘的offsetHeight。

这篇文章(http://www.tek-tips.com/viewthread.cfm?qid=1688809)有一个评论，建议在body元素中添加和删除一个类。

这两种方法都会降低ie8的性能，并且第一种方法对我的布局有副作用。

最好的方法是什么？

Answer 1

对于我的ie8问题，我想出的解决方案是在我正在更改的元素的近父元素上添加/删除一个类。因为我使用的是modernizer，所以我检查ie8，然后执行这个添加/删除动作来获得新的css来绘制。

        $uicontext.addClass('new-ui-look');
        if ($('html').is('.ie8')) {
            // IE8: ui does not repaint when css class changes
            $uicontext.parents('li').addClass('z').removeClass('z');
        }

Answer 2

这个问题的正确答案是，您需要实际更改content规则。

.black-element:before { content:"Hey!"; color: #000;}
.red-element:before { content:"Hey! "; color: #f00;}

注意，我在.red-element上的Hey!后面添加了额外的空格

Answer 3

可笑的是，这是可行的：

function ie8Repaint(element) {
    element.html(element.html().replace('>', '>'));
}

实际上，DOM中没有任何更改，因此它不会影响任何其他浏览器。