dom要素にクラスを追加した後にie8を再描画させる方法

Question

ie8では、クラス名を変更したときに要素が関連するCSSで「再描画」されない場合、ブラウザに強制的にリフレッシュさせ、 ？

この投稿（How can I force WebKit to redraw/repaint to propagate style changes?）は、再描画を強制するoffsetHeightを呼び出すことを提案しました。

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

どちらのアプローチでもパフォーマンスが8回、最初のものがレイアウトに影響していました。

どのような方法が最適ですか？

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

移動イベントまたはサイズ変更イベントを発生させます。

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

Answer 3

この質問に対する正解は、contentルールを実際に変更する必要があることです。

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

お知らせ私は.red-element

Answer 4

これにHey!後に追加の余分なスペースは、ここで他の回答を拡張したものです。新しいクラス（ダグの回答）を追加し、クラスの内容が異なることを確認する必要があります（アダムの回答）。 クラスを変更するだけでは不十分な場合があります。内容の変更は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 5

は途方もなく、これは動作します：

を

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

DOMでは実際に変更されていないので、他のブラウザには影響しません。

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、クロム、およびFirefoxのために美しく働くまで！