IE 및 Edge의 의사 요소 앞뒤에

이 페이지에서 작업하고 있습니다 : link to page.
인사이드 h2 나는 before 및 after 엘리먼트를 가지고 있습니다. IE에서는이 이미지가 작동하지 않는 너비와 높이, 원래 너비와 높이를 사용합니다. FF와 Chrome에서이 문제를 해결하려고 할 때 모든 것이 점점 더 악화되고 있습니다.
가장자리에서는 약간의 차이가 있습니다. 이미지를 더 작게 만드는 방법을 알아 냈지만 before 요소는 내부에 있습니다. h2 텍스트입니다.
다음은 예입니다

(FF에서와 크롬) 정상

조금 이상한 (에지)에서

CSS 코드 (IE에서) 그래서 미친 :IE 및 Edge의 의사 요소 앞뒤에

h2{/*How I am displaying h2 elem */ 
    text-align: center; 
    width: 80%; 
    margin: 45px auto 115px !important; 
    text-transform: uppercase; 
    color: #fff; 
} 
h2::before { 
    content: url(img/pepper.svg); 
    margin-right: 10px; 
    position: relative; 
    height: 50px; 
} 
h2::after{ 
    content: url(img/apple.svg);  
    margin-left: 10px; 
    position: relative; 
    height: 50px; 
} 
@supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */ 
    h2::before { 
     position: absolute; 
    } 
    h2::after{ 
     position: absolute; 
    } 
}

출처

2016-07-22 ptyskju

h2 너비 80 %를 제거하고 시도하십시오. – ankit

오, 정말 간단했습니다, 고마워요! :) 또한 가장자리에서'지원 '해결 된 문제를 제거합니다. – ptyskju

@ankit이 말한 것처럼 width: 80%을 제거하면 IE에서 올바르게 작동합니다. 또한 supports 부분을 제거하여 Edge와 관련된 문제를 해결했습니다.

출처

2016-07-25 10:37:17 ptyskju

왼쪽 및 오른쪽 끝의 앞과 뒤의 위치를 확인하십시오. 작동하지 않는 경우 픽셀을 %로 설정해보십시오.

출처

2016-07-22 16:42:42 Gokul

또 다른 방법 (당신은 HTML의 제어를 가정) : 입력 한 후 비어있는 권리를 추가하고, 입력 + 범위를 사용하여 CSS에서 그 대상 : 나는 AngularJS와에서이 방법을 사용하고

.field_with_errors { 
    display: inline; 
    color: red; 
} 
.field_with_errors input+span:after { 
    content: "*" 
} 
<div class="field_with_errors">Label:</div> 
<div class="field_with_errors"> 
    <input type="text" /><span></span> 
</div>

후 때문에 .ng-invalid 클래스를 양식 요소에 자동으로 추가하고 양식에는 추가하지만 양식에는 추가하지 않습니다.

출처

2017-10-26 09:17:51

IE 및 Edge의 의사 요소 앞뒤에

답변

관련 문제