Forzare IE8 a rerender/ridisegno: prima /: dopo gli elementi pseudo

Question

così mi è stato giocare con questo coso calendario-ish per un po ':

• Griglia di div (che mimano un tavolo)
• Librarsi sopra una cella di una tabella visualizza una descrizione con 2 icone ciascuna composta da una div con: prima e: dopo gli elementi
• Le icone cambiano colore a seconda del colore della cella al passaggio del mouse e della sorella precedente (la classe di colore della cella viene applicata all'icona) .

ridotta violino: http://jsfiddle.net/e9PkA/1/

Questo funziona bene in tutti i browser, ma IE8 e al di sotto (IE 7 LTE e non potrò mai amici, ma IE8 sarebbe bello avere).

IE8 nota il cambiamento di classnames e aggiorna il colore div di conseguenza, ma ignora completamente il colore cambia implicati dalla: prima e: dopo le dichiarazioni, ad esempio:

.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; 
} 

Nel violino sopra, la: prima di /: dopo che gli elementi sono colorati esattamente una volta: la prima volta che viene mostrato il suggerimento.

In un'altra versione si aggiornava ogni volta che spostavo il mouse fuori dal div "table", ma non se il tooltip è nascosto quando si posiziona un bordo div "a cella".

Ho provato a forzare i rifacimenti aggiungendo/rimuovendo altre classi da/all'elemento/ai suoi genitori/al corpo, modificando/accedendo agli attributi di stile e cos'altro, quindi immagino non sia il tuo tipico problema di riverniciatura.

C'è un attacco JS che corregge questo e forza: prima /: dopo l'aggiornamento?

Answer 1

State cercando di capire la stessa cosa. Fondamentalmente, IE8 non ridisegna gli elementi pseudo a meno che non si apporti una modifica al contenuto. Quindi ho modificato il tuo esempio qui (solo CSS): http://jsfiddle.net/lnrb0b/VWhv9/. Ho aggiunto width:0 e overflow:hidden agli elementi pseudo e quindi aggiunto content:"x" a ciascuna opzione di colore in cui x è un numero incrementale di spazi.

Funziona per me; spero che ti aiuti!

Answer 2

Aggiunta di content:"x" a ciascuna dichiarazione degli psuedo-elementi e incremento del numero di spazi per ogni diverso stato dell'elemento DEFINITAMENTE FISSARE il problema.

Fondamentalmente, l'idea è di dire a IE8 che il contenuto è leggermente diverso in ogni stato, quindi ridisegnare il contenuto per ogni stato. Quindi, se il contenuto è lo stesso, lo "fingiamo" con spazi vuoti. BRILLANTE!!

Answer 3

@lnrbob risposta davvero bella !!

Ho avuto il problema di utilizzare lo pseudonimo precedente e successivo di un input di casella di controllo, che utilizza alcuni attributi padre per la visualizzazione del loro contenuto (poiché è facilmente in grado di implementare la traduzione in quel punto).

in modo da apparire come:

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

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

e la marcatura si presenta così:

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

e la modifica che faccio in jQuery si presenta così:

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 + ' '); 

e io chiama questa modifica dopo aver impostato/rimosso le classi per cambiare lo stile della "checkbox" che è piuttosto un pulsante di commutazione questo caso: D

così in questo modo non si ottiene uno StackOverflow da caratteri di spazio troppo se alcuni tester accaniti auto click l'ingresso per un tempo infinito;)

così:

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

Answer 4

fondamentalmente IE8 non ridisegna gli elementi pseudo a meno che non si apporta una modifica al contenuto, in modo da poter modificare come di seguito:

.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: ' '; 
}