web-dev-qa-db-fra.com

IE biffer le pseudo-élément CSS?

J'ai essayé de faire fonctionner quelques pseudo-éléments sur IE, mais cela ne me le permet pas.

Il biffe le CSS et agit comme s'il n'était pas là, ce qui m'a un peu gêné.

Quelqu'un saurait-il ce que je fais mal? 

.newbutton {
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: relative;
  background-color: black;
  margin: 60px 0px 25px 17px;
  overflow: visible;
}

.newbutton:before {
  content: "f";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 37px;
  left: 37px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadecolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.newbutton:after {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  top: -3px;
  left: -3px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}
<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

Capture d'écran de ce qui se passe:

cssinternet-explorerie-developer-tools
59
Kairowa

C'est un problème connu, mais les styles sont en fait appliqués. Les outils de développement pensent que les styles de pseudo-éléments sont remplacés par les styles correspondants des éléments parents. Ceci est facilement démontré en inspectant le style Computed de l'élément parent et en examinant (ce que les outils F12 considèrent comme étant) des styles concurrents:

enter image description here

Encore une fois, cependant, ces styles sont en fait appliqués aux éléments appropriés, quels que soient les idées des outils de développement. Vous pouvez le confirmer en passant sur l'élément parent et les deux pseudo-éléments et en enregistrant leur hauteur calculée:

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

Je vérifierai si nous avons déjà un problème interne lié à ce bogue et y ajouterai cette question. De manière générale, nous essayons de donner aux problèmes comme celui-ci la quantité d'attention proportionnelle à l'ampleur du chagrin que le problème provoque dans le monde réel. Donc, avoir votre question comme un nouvel ajout sur le ticket peut nous aider à avancer un correctif :)

45
Sampson

J'ai eu exactement ce même problème! Vous devez attribuer à vos pseudo-éléments :before et :after une propriété display. 

Ajoutez ce qui suit au :before et au :after.

display: block;

Cela devrait résoudre votre problème. :)

31
Freddie

Comme j'avais le même problème avec Material Font et IE11 et que je ne pouvais pas le résoudre avec les solutions ci-dessus, j'ai cherché plus loin:

La documentation des icônes de conception de matériaux mentionne l’utilisation 

<i class="material-icons">&#xE87C;</i>

pour les navigateurs ne supportant pas les ligatures. Les codes des points pour chaque élément sont répertoriés ici: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Le problème avec: after elements est que HTML dans la content- Tag est restitué sous forme de texte brut affichant le & # x .. vous devez donc utiliser le\escape comme suit:

content:  "\e5c5";
1
Christian

Pour ajouter à la réponse ci-dessus. J'ai essayé display: block mais mon problème était que l'image de fond sortait déformée. Au lieu de cela, j'ai utilisé ci-dessous:

display: inline-block;

Cela corrigeait mon problème avec les images gondolées dans mon: before: after

1
Edmund Park

Consultez ce lien " http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ", cité de ce lien

: after et: before ne sont pas pris en charge dans Internet Explorer 7 et sous les éléments.

Il n'est également pas conçu pour être utilisé sur des éléments remplacés tels que des éléments de formulaire (entrées) et des éléments d'image.

En d'autres termes, c'est impossible avec du CSS pur.

/ * * L'astuce est la suivante: * ce sélecteur dit "prenez le premier élément dom après * le texte saisi (+) et définissez son contenu précédent sur la valeur * (: avant). * /

input#myTextField + *:before {
       content: "????";
    }
0
pjain