Pourquoi IE 11 ne rend pas: après l'élément, montrant le CSS comme barré dans les outils de développement?
J'ai une application angular avec deux icônes de police dans un écran donné. Celles-ci sont très bien rendues dans chrome, firefox et Edge, mais sur IE 11 elles le font Les icônes doivent être restituées sous la forme content de :after pseudo classe, qui selon mes recherches devrait fonctionner correctement sur IE 9 et plus. Cependant, sur IE, ceux-ci ne sont tout simplement pas rendus.
Comme vous pouvez le voir sur la capture d'écran, l'élément: after n'est pas dans le DOM affiché dans les outils de développement, et le CSS est correct mais apparaît barré dans les outils de développement:
Le CSS pertinent qui est compilé et réellement utilisé dans l'écran montrant le problème est le suivant:
.profile-picture[_ngcontent-vem-9]:after {
font-family: Material Icons;
content: "\E3B0";
font-size: 48px;
top: 32px;
left: 25px
}
.profile-picture[_ngcontent-vem-9] .title[_ngcontent-vem-9],
.profile-picture[_ngcontent-vem-9]:after {
display: block;
position: absolute;
color: #9e9e9e;
transition-duration: .3s
}
Les règles au-dessus de celles barrées ne sont pas liées. Mais puisque quelqu'un a demandé à les voir, les voici:
La question est: pourquoi cela se produit-il et comment y remédier?
J'ai eu un problème similaire, l'élément after sur une balise <a> N'a pas été rendu dans IE11, même si je pouvais voir le style CSS pour cela. La réponse de Freddie ici a résolu le problème pour moi. Ajoutez ceci au css display: block;