Jak wymusić ie8, aby odmalować po dodaniu klasy do elementu domowego

Question

W ie8, jeśli elementy nie "przemalowują" z powiązanym css podczas zmiany nazwy klasy, jak zmusić przeglądarkę do odświeżenia i nie zabicia ie8 wydajności ?

Ten post (How can I force WebKit to redraw/repaint to propagate style changes?) zaproponował wywołanie offsetHeight, które wymusza odświeżenie.

Ten wpis (http://www.tek-tips.com/viewthread.cfm?qid=1688809) zawierał komentarz sugerujący dodanie i usunięcie klasy z elementu body.

Oba te podejścia uśmiercono, tj. Wydajność, a pierwsza miała efekty uboczne na moim układzie.

Jakie jest najlepsze podejście?

Answer 1

Rozwiązaniem, które wymyśliłem w związku z moim problemem w wersji ie8, było dodanie/usunięcie klasy bliskiej nadrzędnej elementu, który zmieniam. Ponieważ używam modernizatora, sprawdzam dla ie8, a następnie robię to dodając/usuwając taniec, aby uzyskać nowe css do malowania.

 $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

Pożar przenieść lub zmienić rozmiar wydarzenia na nim.

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

Answer 3

Prawidłowa odpowiedź na to pytanie jest to, że trzeba rzeczywiście zmienić regułę content.

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

Wskazówka dodatkowa przestrzeń dodałem po Hey! na .red-element

Answer 4

ten rozszerza się na innych odpowiedzi tutaj. Musisz zarówno dodać nową klasę (odpowiedź Douga) i upewnić się, że klasa ma inną wartość zawartości (Adam's answer). Zmiana samej klasy może nie wystarczyć. Zmiana zawartości jest konieczna, aby zmusić IE8 do przemalowania. Oto related blog post.

Oto JQuery zmienić dodać nową klasę:

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

Oto CSS z 2nd klasa ma nieco inną wartość treści:

.my-css-class:before {content: "\e014";} 
.my-css-class2:before {content: "\e014 ";} 

Answer 5

Śmiesznie to działa:

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

Nic tak naprawdę nie zmienia się w DOM, więc nie wpłynie to na inne przeglądarki.

Answer 6

miałem wiele trudności i próbowałem wszystkiego bezskutecznie ... dopóki nie próbowałem to dla 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; 
} 

A teraz moi CSS zmiany dla mojego wyboru działa pięknie IE8, Chrome i Firefox!