20

在 ie8 中，如果在更改类名时元素不使用关联的 css“重新绘制”，那么如何强制浏览器刷新而不破坏 ie8 性能？

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

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

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

最好的方法是什么？

4

6 回答 6

24

我为我的 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');
        }
于 2012-12-09T01:37:20.867 回答
9

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

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

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

于 2014-01-16T19:44:19.433 回答
6

可笑的是，这行得通：

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

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

于 2015-01-29T12:37:33.403 回答
2

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

var ie8 = whateverYouUseToDetectIE();
var element = document.getElementById("my-element");
element.className += " new-class";
if (ie8) {
    element.fireEvent("resize");
}
于 2012-12-09T02:17:38.073 回答
1

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

这是要更改添加新类的 JQuery：

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

这是第二类的 CSS，其内容值略有不同：

.my-css-class:before {content: "\e014";}
.my-css-class2:before {content: "\e014 ";}
于 2014-08-08T13:35:41.547 回答
0

我遇到了很多困难，尝试了一切都无济于事……直到我为 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 上运行良好！

于 2015-06-12T01:48:52.563 回答