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

【问题标题】：How to force ie8 to repaint after adding a class to a dom element将类添加到dom元素后如何强制ie8重新绘制
【发布时间】：2015-06-12 09:48:52
【问题描述】：

在 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 的性能，第一种方法对我的布局产生了副作用。

最好的方法是什么？

【问题讨论】：

标签： javascript jquery internet-explorer-8

【解决方案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');
        }

【讨论】：

我观察到 IE8 似乎会根据 DOM 中的元素数量和附加事件的数量而变慢。此外，发现属性选择器在事件处理程序中更快，例如[some-attr] 优于 .some-class。
我会说$(el).parent().addClass('forceiepaint').removeClass('forceiepaint')
在将我的头撞到 IE8 并尝试了我在网上找到的各种 hack 之后，这个终于解决了我的布局怪异问题！
我什么都做不了，包括这个。非常令人沮丧。
@MichaelGiovanniPumo 您尝试过这篇文章中的其他解决方案吗？如果这不起作用，请确保 jslint/hint 您的代码。我有一个恼人的 ie8 错误，在我的代码 lint 释放后神奇地消失了。只是一个想法。

【解决方案2】：

这个问题的正确答案是你需要真正改变content规则。

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

请注意我在.red-elementHey! 之后添加的额外空格

【讨论】：

【解决方案3】：

可笑的是，这行得通：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

我刚刚尝试过，并且行为不像近亲上的添加/删除类那样雄辩。并非所有事件都得到了重绘。无论我调用它们的速度有多快，添加/删除类似乎都会重新绘制所有事件。在我的例子中，mouseenter/leave 事件。

【解决方案5】：

这扩展了此处的其他答案。您需要添加一个新类（Doug's answer）并确保该类具有不同的内容值（Adam's answer）。仅仅改变班级可能是不够的。需要更改内容以强制 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 ";}

【讨论】：

【解决方案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 上运行良好！

【讨论】：