반응형
문제 상황
IE8에서는 자바스크립트를 통해 클래스를 추가/제거하여 :before나 :after같은 슈도 엘리먼트(pseudo element) 스타일을 변경할 때 redraw하지 않는다.
원인
IE8은 contents의 값이 변경 될 때만 슈도 엘리먼트를 redraw한다.
해결 방법
항상 모든 스타일 규칙에서 다른 콘텐츠 값을 사용하면 매번 redraw가 될 것이다.
.checkbox:before {
content: '';
}
.checkbox.checked:before {
content: ' '; /* <- content 값을 바꾸기 위해 단순한 공백 추가 */
background-color: #ccc;
}
참고 링크
반응형