IE에서 가상요소 사용 시 속성이 삭제 되는 현상

input 가상 클래스 ::after 로 디자인 된 체크박스 작업 시 IE에서 가상요소인 ::after 속성을 삭제하는 현상 

 

익스플로러 11 개발자도구 화면

 

.apply .agree .input__checkbox {float:left; width:0px; height:0px; margin:-1px; padding:0; border:0; clip:rect(0, 0, 0, 0);}
.apply .agree .input__checkbox::after {display:block; content:''; cursor:pointer; display:inline-block; width:30px; height:30px; 
    background:url('../../static/img/ico_agree.png') no-repeat; background-position:center top; background-size:100%;}
.apply .agree .input__checkbox + label {float:left; margin-left:10.2%; color:#fff; line-height:30px; letter-spacing:-1px; font-size:20px;}
.apply .agree .input__checkbox + label i {color:#ff2b00;}
.apply .agree .input__checkbox:checked:after {background-position:center bottom;}

 

기존의 input은 숨기고, input에 가상 클래스에 체크박스 이미지를 생성한 후 input 혹은 label 을 선택하면

background-position 값을 변경 시켜 체크된 이미지를 보이게끔 설정해 놓았다. 

 

위와 같이 작업했더니 IE 11 브라우저에서 가상 클래스 :after CSS 속성들이 모두 삭제되어

체크박스 이미지가 보이지 않는 현상이 나타남.

 

 

해결 

미디어쿼리로 IE10 이상일 경우에만 :after 요소를 숨긴 후 기존의 input 요소를 사용하는 코드를 추가함. 

 /* IE10+ */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .apply .agree .input__checkbox {width:30px; height:30px;}
    .apply .agree .input__checkbox::after {display:none;}
    .apply .agree .input__checkbox:checked:after {display:none;}
}

unto.kr/blog/coding-info/only-ie-css/