20

ie8 で、クラス名を変更したときに要素が関連付けられた css で「再描画」されない場合、ブラウザを強制的に更新して ie8 のパフォーマンスを損なわないようにするにはどうすればよいですか?

この投稿 ( WebKit に再描画/再描画を強制してスタイルの変更を反映させるにはどうすればよいですか? ) は、再描画を強制する offsetHeight を呼び出すことを提案しました。

この投稿 ( http://www.tek-tips.com/viewthread.cfm?qid=1688809 ) には、 body 要素からクラスを追加および削除することを提案するコメントがありました。

これらのアプローチはどちらも ie8 のパフォーマンスを低下させ、最初のアプローチではレイアウトに副作用がありました。

最善のアプローチは何ですか？

4

6 に答える 6

24

私の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');
        }
于 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 に答える
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 に答える
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 に答える