IE, пересекающий псевдоэлемент CSS?

Question

Я пытался получить несколько псевдо-элементов для работы с IE, но это меня просто не пускает.

Он вычеркивает CSS и действует так, как будто его нет, что меня ободряет.

Кто-нибудь знает, что я делаю неправильно?

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

Скриншот, что происходит:

Answer 1

Это известная проблема, но стили на самом деле применяются. Инструменты разработчика думают, что стили псевдоэлементов переопределяются соответствующими стилями родительских элементов. Это легко показать, осматривая компьютерной стиль родительского-элемент и, глядя на (то, что F12 инструменты считают) конкурирующие стили:

Опять же, однако, эти стили на самом деле являются применяется к правильным элементам - независимо от того, что инструменты разработчика считают или предлагают. You can confirm this переезжая родительском-элемента и двух псевдо-элементов и протоколирование их вычисленная высота:

(function() { 

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

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

}()); 

Я проверю, чтобы увидеть, если у нас уже есть внутренний вопрос отслеживания эту ошибку, и добавить этот вопрос к нему , Вообще говоря, мы стараемся дать такие вопросы, как объем внимания, пропорциональный количеству горя, вызываемого проблемой в реальном мире. Так что ваш вопрос как новое дополнение в билете может помочь нам переместить исправление вперед :)

Answer 2

У меня была такая же проблема! Вы должны предоставить свои :before и :after псевдо элементы a display.

Добавить следующее в :before и :after.

display: block; 

Это должно исправить вашу проблему. :)