如何在将类添加到dom元素后强制ie8重绘

在ie8中，如果元素在更改类名时没有与关联的css“重新绘制”，那么如何强制浏览器刷新而不是杀死ie8性能？

这篇文章（ 我如何强制WebKit重绘/重绘以传播样式更改？ ）建议调用offsetHeight来强制重绘。

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

这两种方法都杀死了ie8性能，第一种方法对我的布局产生了副作用。

什么是最好的方法？

Answer 1

我为我的ie8问题提出的解决方案是在我正在改变的元素的近亲的上添加/删除一个类。 由于我正在使用现代化器，我检查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;} 

请注意我在Hey!之后添加的额外空间Hey! 在.red-element

Answer 3

可笑的是，这有效：

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

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

Answer 4

在其上触发移动或resize事件。

 var ie8 = whateverYouUseToDetectIE(); var element = document.getElementById("my-element"); element.className += " new-class"; if (ie8) { element.fireEvent("resize"); } 

Answer 5

这扩展了其他答案。 您需要添加一个新类（ Doug的答案 ）并确保该类具有不同的内容值（ Adam的答案 ）。 仅仅改变class级可能还不够。 需要更改内容以强制IE8重新绘制。 这是一篇相关的博客文章 。

这是更改添加新类的JQuery：

 $(".my-css-class").addClass("my-css-class2"); 

这是第二类具有略微不同内容值的CSS：

 .my-css-class:before {content: "\e014";} .my-css-class2:before {content: "\e014 ";} 

Answer 6

我遇到了很多困难并尝试了一切无济于事……直到我为IE8尝试了这个

 function toggleCheck(name) { el = document.getElementById(name); if( hasClass(el, 'checked') ) { el.className = el.className.replace(/checked/,'unchecked'); } else if( hasClass(el, 'unchecked') ) { el.className = el.className.replace(/unchecked/,'checked'); } document.body.className = document.body.className; } function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } 

现在我的CSS更改为我的复选框工作精美的IE8，Chrome和Firefox！