web-dev-qa-db-fra.com

Forcer IE8 à restituer / repeindre: avant /: après les pseudo-éléments

donc je joue avec ce truc calendrier-ish pour un peu:

  • Grille de divs (imitant une table)
  • Le survol d'une cellule de tableau affiche une info-bulle avec 2 icônes chacune composée d'un div avec: avant et: après les éléments
  • Les icônes changent de couleur selon la couleur de la cellule survolée et celle de son frère précédent (la classe de couleur de la cellule est appliquée à l'icône).

Violon dépouillé: http://jsfiddle.net/e9PkA/1/

Cela fonctionne bien dans tous les navigateurs, sauf IE8 et inférieurs (IE lte 7 et je ne serai jamais amis, mais IE8 serait bien d'avoir).

IE8 remarque le changement de classNames et met à jour la couleur des divs en conséquence mais ignore complètement les changements de couleur impliqués par les déclarations: avant et: après, par exemple:

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

Dans le violon ci-dessus, les éléments: avant /: après sont colorés exactement une fois: la première fois que l'infobulle est affichée.

Dans une autre version, il se mettait à jour à chaque fois que je déplaçais la souris hors du div "table", mais pas si l'infobulle était masquée lors du survol d'une bordure de div "cellule".

J'ai essayé de repeindre à force en ajoutant/supprimant d'autres classes à/de l'élément/ses parents/le corps, en éditant/accédant aux attributs de style et ainsi de suite donc je suppose que ce n'est pas votre problème de repeindre moyen.

Existe-t-il un hack JS qui corrige cela et oblige: avant /: après à mettre à jour?

javascriptcssinternet-explorer-8pseudo-element
52
fdo

J'ai essayé de comprendre la même chose. Fondamentalement, IE8 ne redessine pas les pseudo-éléments sauf si vous apportez une modification au contenu. J'ai donc modifié votre exemple ici (juste CSS): http://jsfiddle.net/lnrb0b/VWhv9/ . J'ai ajouté width:0 et overflow:hidden aux pseudo-éléments, puis ajouté content:"x" à chaque option de couleur où x est un nombre incrémentiel d'espaces.

Ça marche pour moi; j'espère que cela vous aide!

131
Stuart Burrows

Ajouter content:"x" à chaque déclaration des éléments pseudo et en incrémentant le nombre d'espaces pour chaque état différent de l'élément CORRIGER DEFINITIVEMENT le problème.

Fondamentalement, l'idée est de dire à IE8 que le contenu est légèrement différent dans chaque état, donc redessinez le contenu pour chaque état. Donc, si le contenu est le même, nous le "simulons" avec des espaces vides. BRILLANT!!

2
Vinny

@lnrbob vraiment une belle réponse !!

j'ai eu le problème que j'ai utilisé les pseudos avant et après d'une entrée de case à cocher, qui utilisent certains attributs parents pour afficher leur contenu (car ils peuvent facilement y implémenter une traduction).

ils ressemblent donc à:

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

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

et le balisage ressemble à ceci:

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

et la modification que je fais dans jquery ressemble à ceci:

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

et j'appelle cette modification après avoir défini/supprimé des classes pour changer le style de la "case à cocher" qui est plutôt un bouton de commutation dans ce cas: D

ainsi, vous n'obtiendrez pas de débordement de pile à partir de trop de caractères d'espace si certains testeurs inconditionnels cliquent automatiquement sur l'entrée pendant un temps infini;)

comme ça:

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

Fondamentalement, IE8 ne redessine pas les pseudo-éléments sauf si vous apportez une modification au contenu, vous pouvez donc modifier comme ci-dessous:

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

J'ai un problème similaire dans IE11 et Edge en ce moment.

en survol, j'essaye de changer le contenu de 'v' à 'V'. => Ne fonctionne sur aucun navigateur Microsoft.

Cependant, si je change la lettre en quelque chose d'autre ('w'/'W') ou deux lettres ('vV'), l'icône change. Oui Microsoft.

0
Manuel Graf