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

上.red-element后添加的额外空间

Answer 3

荒谬的是，这有效：

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

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

Answer 4

触发移动或调整事件大小。

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

Answer 5

这扩展了其他答案。您需要添加一个新类（ Doug的答案）并确保该类具有不同的内容值（ Adam的回答）。仅仅改变班级可能还不够。需要更改内容以强制IE8重新绘制。这是related blog post。

以下是要更改的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！

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

6 个答案: