Zmuszanie IE8 rerender/repaint: Przed/Po elementami pseudo

Question

więc byłem bawiąc się tym kalendarzowego-owski thingy na trochę:

• siatki div (naśladując tabeli)
• unosić nad komórką tabeli wyświetlana jest etykieta narzędzi z 2 ikonami, z których każda składa się z elementu div z: przed i: po elementach
• Ikony zmieniają kolor w zależności od koloru komórki i jej poprzedniego rodzeństwa (klasa kolorów komórki jest stosowana do ikony) .

Rozebrani skrzypce: http://jsfiddle.net/e9PkA/1/

Działa to dobrze, ale w każdej przeglądarce IE8 i poniżej (LTE IE 7 i nigdy nie przyjaciele, ale IE8 byłoby miło mieć).

IE8 zauważy zmianę classnames i aktualizuje kolor DIV odpowiednio ale zupełnie ignoruje zmiany kolorów implikowane przez: before i: after deklaracji, np:

.wbscal_icon_arrival:before { 
    width: 12px; 
    height: 4px; 

    left: -8px; 
    top: 6px; 
    background-color: silver; 
} 

.wbscal_icon_arrival.wbscal_full:before { 
    background-color: #ff0000 !important; 
} 

W ryba powyżej, before /: po tym, jak elementy są kolorowane dokładnie jeden raz: przy pierwszym wyświetleniu etykiety narzędzia.

W innej wersji aktualizowałoby się za każdym razem, gdy wyjęłabym mysz z "stołu" div, ale nie, jeśli podpowiedź jest ukryta po najechaniu "div" komórki.

Próbowałem repelts wymuszających siłę, dodając/usuwając inne klasy do/z elementu/jego rodziców/ciała, edytując/uzyskując atrybuty stylu i cokolwiek, więc myślę, że to nie jest twój średni problem odświeżania.

Czy jest jakiś hak JS, który to naprawia i wymusza: przed /: po aktualizacji?

Answer 1

Próbowałem dojść do tego samego. Zasadniczo IE8 nie przerysowuje pseudo elementów, chyba że dokonasz zmiany w treści. Zmodyfiowałem twój przykład tutaj: (tylko CSS): http://jsfiddle.net/lnrb0b/VWhv9/. Dodałem width:0 i overflow:hidden do pseudo elementów, a następnie dodałem content:"x" do każdej opcji koloru, gdzie x jest zwiększającą się liczbą spacji.

To działa dla mnie; mam nadzieję, że ci to pomoże!

Answer 2

Dodawanie do każdej deklaracji elementów psuedo i zwiększanie liczby spacji dla każdego innego stanu elementu OSTROŻNIE USUŃ problem.

Zasadniczo chodzi o to, aby powiedzieć IE8, że zawartość jest nieco inna w każdym stanie, więc przerysuj zawartość dla każdego stanu. Tak więc, jeśli zawartość jest taka sama, "sfałszujemy" ją pustymi miejscami. ZNAKOMITY!!

Answer 3

@lnrbob naprawdę dobra odpowiedź !!

Miałem problem, że użyłem pseudo przed i po wprowadzeniu danych z pola wyboru, które używają niektórych atrybutów nadrzędnych do wyświetlania ich treści (ze względu na łatwość realizacji tłumaczenia).

więc wyglądać następująco:

input:before { 
    content: "" attr(data-on) ""; 
} 

input:after { 
    content: "" attr(data-off) ""; 
} 

i znaczników wygląda następująco:

<div class="switch off" data-on="It is ON" data-off="It is OFF"> 
    <input id="switch" name="switch" type="checkbox" class="off"> 
</div> 

i modyfikacja zrobić w jquery wygląda następująco:

var mSwitch = $('div.switch'), 
    on = $.trim(mSwitch.attr('data-on')), 
    off = $.trim(mSwitch.attr('data-off')); 
// remove any spaces due to trim 
mSwitch .attr('data-on', on); 
// add a space 
mSwitch .attr('data-on', on + ' '); 
mSwitch .attr('data-off', off); 
mSwitch .attr('data-off', off + ' '); 

i ja wywołaj tę modyfikację po ustawieniu/usunięciu klas, aby zmienić styl "checkbox", który jest raczej przyciskiem przełączającym ten przypadek: D

więc ten sposób nie dostać stackoverflow od nadmiaru spacjami jeśli niektórzy testerzy Hardcore auto kliknij wejście na czas nieskończony;) ​​

tak:

<div class="switch on" data-on="ON" data-off="OFF                                                             "> 

Answer 4

zasadniczo IE8 nie przerysować elementy pseudo chyba wprowadzić zmiany do treści, dzięki czemu można modyfikować jak poniżej:

.wbscal_icon_arrival:before { 
    width: 12px; 
    height: 4px; 
    left: -8px; 
    top: 6px; 
    background-color: silver; 
    content: ''; 
} 

.active .wbscal_icon_arrival:before { 
    background-color: gold; 
    content: ' '; 
}