IE przekreślać pseudo element CSS?

Question

Próbowałem uzyskać kilka pseudo elementów do pracy nad IE, ale to po prostu nie pozwala mi.

Wymazuje kod CSS i zachowuje się tak, jakby go nie było, co mnie za bardzo przygniata.

Czy ktoś wie, co robię źle?

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

ekranu, co się dzieje:

Answer 1

Jest to znany problem, ale style są w rzeczywistości stosowane. Narzędzia programistyczne uważają, że style pseudoelementowe są nadpisywane przez elementy nadrzędne odpowiadające stylom. Można to łatwo wykazać inspekcji wyliczona styl rodzica-elementu i patrząc na (co narzędzia F12 wierzyć być) konkurujących ze sobą style:

Znowu jednak te style są w rzeczywistości jest zastosowane do poprawnych elementów - niezależnie od tego, w co wierzą lub sugerują narzędzia programistyczne. You can confirm this uruchamiając nad elementu nadrzędnego-a dwoma pseudo-elementów i rejestrowania ich wysokość obliczana:

(function() { 

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

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

}()); 

będę sprawdzić, czy mamy już wewnętrzny problem śledzenia tego błędu, a następnie dodaj do niego to pytanie . Ogólnie rzecz biorąc, staramy się podawać takie kwestie, jak ilość uwagi proporcjonalna do ilości żałoby, jaką powoduje problem w realnym świecie. Tak więc posiadanie twojego pytania jako nowego dodatku na bilecie może pomóc nam przenieść poprawkę do przodu :)

Answer 2

Miałem dokładnie ten sam problem! Musisz podać swoje pseudoelementy o wartości i display.

Dodaj następujące elementy do :before i :after.

display: block; 

To powinno naprawić Twój problem. :)