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 도구가 생각하는 무엇을)보고에 의해 입증되어 다시

을, 그러나, 이러한 스타일은있는 사실이다 개발자 도구가 무엇을 믿고 제안하는지에 관계없이 올바른 요소에 적용됩니다.

(function() { 

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

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

}()); 

나는 우리가 이미이 버그를 추적하는 내부 문제가, 그리고이 질문을 추가 있는지 확인합니다 : 부모 요소와 두 의사 요소를 통해 실행하고 자신의 계산 된 높이를 로그인하여 You can confirm this . 일반적으로 말하자면, 우리는이 문제가 현실 세계에서 겪고있는 슬픔의 양에 비례하여 관심을 기울 이도록하려고 노력합니다. 그래서 티켓에 새로운 추가로 귀하의 질문을 가지고 우리는 앞으로 수정을 이동하는 데 도움이 될 수 있습니다 :)

Answer 2

나는 똑같은 문제가 있었어! :before 및 :after 개의 의사 요소에 display 속성을 지정해야합니다.

:before 및 :after에 다음을 추가하십시오.

display: block; 

이렇게하면 문제가 해결됩니다. :)