Forzar a IE8 regenere/repintado: antes /: después de pseudo elementos

Question

así que he estado jugando con esta cosita calendario-ish para un poco:

• cuadrícula de divs (imitando una mesa)
• cernido sobre una celda de tabla muestra una información sobre herramientas con 2 iconos cada uno que consta de un div con: before y: after elements
• Los iconos cambian de color según el color de la celda y el de su hermano anterior (la clase de color de la celda se aplica al icono) .

Pelado abajo violín: http://jsfiddle.net/e9PkA/1/

Esto funciona bien en todos los navegadores, pero IE8 y por debajo (IE lte 7 Y nunca amigos, pero IE8 sería bueno tener).

IE8 nota el cambio de nombres de clases y actualiza color de los divs' en consecuencia, pero ignora por completo los cambios de color que implica el: before y: after declaraciones, por ejemplo:

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

En el violín anterior, el: antes /: después de que los elementos se colorean exactamente una vez: la primera vez que se muestra la información sobre herramientas.

En otra versión, se actualizaba cada vez que sacaba el mouse de la div "tabla", pero no si la información sobre herramientas está oculta al pasar el borde div de una "celda".

He intentado forzar el repintado agregando/eliminando otras clases del/de los elementos/sus padres/el cuerpo, editando/accediendo a los atributos del estilo y demás, así que supongo que no es un problema de repintado promedio.

¿Hay un truco JS que corrige esto y fuerza: antes/después de actualizar?

Answer 1

He estado tratando de descubrir lo mismo. Básicamente IE8 no vuelve a dibujar los pseudo elementos a menos que realice un cambio en el contenido. Así que modifiqué su ejemplo aquí (solo CSS): http://jsfiddle.net/lnrb0b/VWhv9/. Agregué width:0 y overflow:hidden a los pseudoelementos y luego agregué content:"x" a cada opción de color donde x es un número creciente de espacios.

Funciona para mí; Espero que te ayude!

Answer 2

Agregando content:"x" a cada declaración de los elementos de psuedo e incrementando el número de espacios para cada estado diferente del elemento DEFINITIVAMENTE CORREGIR el problema.

Básicamente, la idea es decirle a IE8 que el contenido es ligeramente diferente en cada estado, así que vuelva a dibujar el contenido para cada estado. Entonces, si el contenido es el mismo, lo 'falsificamos' con espacios vacíos. ¡¡BRILLANTE!!

Answer 3

@lnrbob realmente buena respuesta !!

Tuve el problema de que utilicé los pseudos de antes y después de una entrada de casilla de verificación, que están usando algunos atributos principales para mostrar su contenido (debido a que es fácil implementar traducción allí).

por lo que parecen:

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

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

y el margen de beneficio es así:

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

y la modificación que hago en jQuery se ve así:

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

y yo llame a esta modificación después de configurar/eliminar clases para cambiar el estilo de la "casilla de verificación", que es más bien un botón de cambio en este caso: D

así de esta manera usted no consigue un stackoverflow de caracteres de espacio demasiado si algunos probadores incondicionales de auto haga clic en la entrada para un tiempo infinito;)

así:

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

Answer 4

básicamente IE8 no redibuja los pseudo elementos a menos que se realice un cambio en el contenido, por lo que puede modificar, como a continuación:

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