IE пересекает псевдоэлемент CSS?

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

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

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

 <div class="starttour">
        <div class="newbutton headerbutton">
            <span class="iconhead icon-02-arrow-icon"></span>
        </div>
        <p>START TOUR</p>
    </div>

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));
}

Снимок экрана о том, что происходит:

Ответы

Ответ 1

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

enter image description here

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

(function () {

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

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

}());

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

Ответ 2

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

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

display: block;

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