Internet Explorer 전용 CSS

홈페이지를 제작하다 보면 브라우저별로 다르게 보이는 경우가 간혹 있습니다. 특히 Internet Explorer 8이나 Interneter Explorer 9에서 예상대로 작동하지 않는 호환성 문제가 발생하는 경우가 빈번합니다. 이 경우 다음과 같이 인터넷 익스플로러 전용 CSS를 사용하여 문제 해결을 시도해볼 수 있습니다.

/* IE8은 \0을 사용합니다.  */
@media all\0 {
.dude { color: brown; }
.gal { color: orange; }
}

/* IE9는 \9를 사용합니다.  */
@media all and (monochrome:0) {
.dude { color: yellow\9; }
.gal { color: blue\9; }
}

/* IE10과 IE11은 -ms-high-contrast */
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}

참고로 -ms-high-contrast는 두 가지 값(none, active)을 지원합니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ CSS 스타일 */
}