Т. е. вычеркивание псевдо элемента CSS?

Я пытался получить несколько псевдо-элементов для работы на 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>

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

3 53
css internet-explorer-8 ie-developer-tools

3 ответа:

Это известная проблема, но стили на самом деле применяется. Инструменты разработчика считают, что стили псевдо-элементов переопределяются соответствующими стилями родительских элементов. Это легко продемонстрировать, осмотрев вычисляемые стиль родительского элемента и глядя на (то, что инструменты 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 );
    });

}());

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

42

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

добавить :before и :after.

display: block;

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

23

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

display: inline-block;

это исправило мою проблему с искаженными изображениями в my :before: after

1