[css] IE가 가상 요소 CSS를 넘나들나요?

Program / 글쓴이

나는 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>

스 니펫 확장

일어나는 일의 스크린 샷 :

답변

이것은 알려진 문제이지만 실제로 스타일이 적용되고 있습니다. 개발자 도구는 유사 요소 스타일이 부모 요소에 해당하는 스타일에 의해 재정의되고 있다고 생각합니다. 이는 상위 요소 의 계산 된 스타일을 검사하고 경쟁 스타일 (F12 도구가 믿는 것) 을 살펴보면 쉽게 입증됩니다 .

여기에 이미지 설명 입력

그러나 이러한 스타일은 실제로 개발자 도구가 믿거 나 제안하는 것과 관계없이 올바른 요소에 적용됩니다. 부모 요소와 두 개의 의사 요소를 실행하고 계산 된 높이를 로깅하여 이를 확인할 수 있습니다 .

(function () {

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

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

}());

이 버그를 추적하는 내부 문제가 이미 있는지 확인하고이 질문을 추가하겠습니다. 일반적으로 말해서, 우리는 현실 세계에서 그 문제가 야기하는 슬픔의 정도에 비례하여 이와 같은 문제에주의를 기울이려고합니다. 따라서 귀하의 질문을 티켓에 새로 추가하면 수정을 진행하는 데 도움이 될 수 있습니다. 🙂

답변

나는 똑같은 문제가 있었다! 사용자 :before및 :after유사 요소에 display속성을 제공해야합니다 .

:before및에 다음을 추가합니다 :after.

display: block;

문제가 해결 될 것입니다. 🙂

답변

위의 답변에 추가하려면. 나는 display : block을 시도했지만 내 문제는 배경 이미지가 뒤틀린 것입니다. 대신 아래에서 사용했습니다.

display: inline-block;

이것은 내 : before : after 내에서 뒤틀린 이미지 문제를 해결했습니다.

답변

Material Font와 IE11에서 동일한 문제가 발생하여 위의 솔루션으로 해결할 수 없었기 때문에 더 멀리 보았습니다.

머티리얼 디자인 아이콘에 대한 문서는 사용을 언급합니다. 

<i class="material-icons">&#xE87C;</i>

합자를 지원하지 않는 브라우저의 경우. 각 항목의 코드 포인트는 여기에 나열되어 있습니다. https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

: after 요소의 문제점은 content-Tag의 HTML 이 & # x ..를 표시하는 일반 텍스트로 렌더링되므로 다음과 같이 \ 이스케이프를 사용해야합니다.

content:  "\e5c5";

답변

나는 똑같은 문제가 있었다! 유사 요소의 상위 요소에 overflow : visible속성을 제공해야합니다 .

답변

이 링크 에서 인용 한 ” http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ” 링크를 확인하십시오.

: after 및 : before는 Internet Explorer 7 이하에서는 모든 요소에서 지원되지 않습니다.

또한 양식 요소 (입력) 및 이미지 요소와 같은 대체 요소에 사용하기위한 것이 아닙니다.

즉, 순수한 CSS로는 불가능합니다.

/ * * 트릭은 여기에 있습니다. *이 선택자는 “입력 텍스트 (+) 뒤의 첫 번째 dom 요소를 가져와 * 이전 내용을 * 값 (: before)으로 설정합니다. * /

input#myTextField + *:before {
       content: "?";
    }

답변