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ツールがあることを信じるもの）を調べることで証明される：再び

を、しかし、これらのスタイルはされて、実際にされています開発者ツールが何を信じているか、提案しているかに関係なく、正しい要素に適用されます。親要素と2擬似要素上で実行し、その計算された高さログインし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疑似要素にはdisplayプロパティを指定する必要があります。

:beforeと:afterに以下を追加してください。

display: block; 

これで問題が解決するはずです。 :)