IE streichen Pseudo-Element CSS?

Question

Ich habe versucht, ein paar Pseudo-Elemente zu IE zu arbeiten, aber es lässt mich einfach nicht.

Es durchstreicht die CSS und verhält sich als wäre es nicht da, was mich irgendwie aggregiert.

Würde jemand wissen, was ich falsch mache?

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

Screenshot von dem, was passiert:

Answer 1

Dies ist ein bekanntes Problem, aber die Stile sind in der Tat angewendet werden. Die Entwickler-Tools denken, dass die Pseudo-Element-Stile von den entsprechenden Stilen der Eltern-Elemente überschrieben werden. Dies ist leicht nachgewiesen durch Prüfen der Computed Stil des Eltern-Element und betrachten (was die F12-Tools glauben zu sein) konkurrierende Arten:

Wiederum jedoch sind diese Arten in der Tat zu sein auf die richtigen Elemente angewendet - unabhängig davon, was die Entwickler-Tools glauben oder vorschlagen. You can confirm this durch über die Eltern-Element ausgeführt wird und die beide Pseudo-Elemente und ihre berechnete Höhe Anmeldung:

(function() { 

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

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

}()); 

Ich werde überprüfen, um zu sehen, ob wir bereits eine interne Ausgabe dieses Bug-Tracking haben, und fügen Sie diese Frage . Im Allgemeinen versuchen wir, solchen Dingen die Aufmerksamkeit zu geben, die proportional zum Ausmaß der Trauer ist, die das Problem in der realen Welt verursacht. Wenn Sie also Ihre Frage als neue Ergänzung auf dem Ticket haben, können Sie uns helfen, eine Lösung weiter zu leiten.

Answer 2

Ich hatte genau dieses gleiche Problem! Sie müssen Ihren :before und :after Pseudoelementen eine display Eigenschaft geben.

Fügen Sie zu den :before und :after Folgendes hinzu.

display: block; 

Dies sollte Ihr Problem beheben. :)