IE che elimina lo pseudo elemento CSS?

Question

Ho cercato di ottenere alcuni pseudo elementi per lavorare su IE, ma non me lo consente.

Attraversa il CSS e si comporta come se non fosse lì, il che mi aggrava un po '.

Qualcuno sa cosa sto facendo male?

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

schermo di ciò che accade:

Answer 1

Questo è un problema noto, ma gli stili sono infatti applicati. Gli strumenti di sviluppo pensano che gli stili pseudo-elemento vengano sovrascritti dagli stili corrispondenti degli elementi parent. Questo è facilmente dimostrato controllando la stile computerizzata del genitore-elemento e guardando (quanto gli strumenti F12 credono essere) stili di concorrenti:

Anche in questo caso, tuttavia, questi stili sono infatti essere applicato agli elementi corretti, indipendentemente da ciò che gli strumenti di sviluppo credono o suggeriscono. You can confirm this eseguendo il genitore-elemento ed i due pseudo-elementi e la registrazione loro altezza computerizzata:

(function() { 

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

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

}()); 

Vado a controllare per vedere se abbiamo già una questione interna di monitoraggio questo bug, e aggiungere a questa domanda ad esso . In generale, cerchiamo di dare a questo problema la quantità di attenzione proporzionale alla quantità di dolore che il problema sta causando nel mondo reale. Quindi avere la tua domanda come una nuova aggiunta sul biglietto può aiutarci a spostare una correzione in avanti :)

Answer 2

Ho avuto esattamente lo stesso problema! È necessario fornire gli elementi pseudo :before e a display proprietà.

Aggiungere quanto segue al numero :before e .

display: block; 

Questo dovrebbe risolvere il problema. :)