javascript - Obligando a IE8 a redirigir/repintar: antes/: después de pseudo elementos

css internet-explorer-8

Question

Así que he estado jugando con esta cosa del calendario por un momento:

• Cuadrícula de divs (imitando una mesa)
• Al pasar sobre una celda de la tabla, se muestra una información sobre herramientas con 2 iconos, cada uno de los cuales consta de un div con: antes y: después de los elementos
• Los iconos cambian de color según el color de la celda desplazada y el de su hermano anterior (la clase de color de la celda se aplica al ícono).

Strid down fiddle: http://jsfiddle.net/e9PkA/1/

Esto funciona bien en todos los navegadores, excepto en IE8 e inferior (IE lte 7 y yo nunca seremos amigos, pero sería bueno tener IE8).

IE8 nota el cambio de los nombres de clase y actualiza el color de los divs en consecuencia, pero ignora por completo los cambios de color que implican las declaraciones antes y después, 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 de arriba, los elementos: antes /: después se colorean exactamente una vez: la primera vez que se muestra la información sobre herramientas.

En otra versión, se actualizaría cada vez que moviera el mouse fuera del div "table", pero no si la información sobre herramientas está oculta cuando se desplaza un borde div de "celda".

He intentado forzar repintados al agregar / eliminar otras clases del elemento / sus padres / el cuerpo, editar / acceder a los atributos de estilo y otras cosas, así que supongo que no es su problema de repintado promedio.

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

Answer 1

@lnrbob muy buena respuesta !!

Tuve el problema de usar los pseudos anteriores y posteriores de una entrada de casilla de verificación, que utilizan algunos atributos principales para mostrar su contenido (debido a que es fácil de implementar la traducción allí).

para que se vean como

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

y el marcado se parece a esto:

<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 llamo 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

por lo tanto, de esta manera no obtendrás un de demasiados caracteres de espacio si algunos probadores hardcore hacen clic automáticamente en la entrada por un tiempo infinito;)

como eso:

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

Answer 2

Agregando content:"x" a cada declaración de los elementos psuedo e incrementando el número de espacios para cada estado diferente del elemento. DEFINITIVAMENTE ARREGLAR 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. Por lo tanto, si el contenido es el mismo, lo "falsificamos" con espacios vacíos. ¡¡BRILLANTE!!

Answer 3

Básicamente, IE8 no vuelve a dibujar los pseudo elementos a menos que realice un cambio en el contenido, por lo que puede modificarlo 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: '' '';
}

Answer 4

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

Esto funciona para mi; Espero que te ayude!