본문 바로가기

웹 프론트엔드/잡다한 이슈

IE8에서 클래스 이름이 바뀔 때, 슈도 엘리먼트(pseudo element)를 redraw 하는 법.

문제 상황

IE8에서는 자바스크립트를 통해 클래스를 추가/제거하여 :before:after같은 슈도 엘리먼트(pseudo element) 스타일을 변경할 때 redraw하지 않는다.

원인

IE8은 contents의 값이 변경 될 때만 슈도 엘리먼트를 redraw한다.

해결 방법

항상 모든 스타일 규칙에서 다른 콘텐츠 값을 사용하면 매번 redraw가 될 것이다.

.checkbox:before {
    content: '';
}
.checkbox.checked:before {
    content: ' '; /* <- content 값을 바꾸기 위해 단순한 공백 추가 */
    background-color: #ccc;
}

참고 링크