CSS
Internet Explorer 해킹

비고

Internet Explorer 10 이상의 고 대비 모드

Internet Explorer 10+ 및 Edge에서 Microsoft는 브라우저에서 "고 대비"설정을 노출하는 -ms-high-contrast 미디어 선택기를 제공하므로 프로그래머가 사이트의 스타일을 적절하게 조정할 수 있습니다.

-ms-high-contrast selector에는 active , black-on-white 및 white-on-black 3 가지 상태가 있습니다. IE10 +에서도 none 상태 였지만 Edge에서는 더 이상 지원되지 않습니다.

예제들

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
   .header{
      background: #fff;
      color: #000;
   }
}

하이 콘트라스트 모드가 활성화되어 있고 black-on-white 모드 인 경우 헤더 배경이 흰색으로 변경되고 텍스트 색상이 검은 색으로 변경됩니다.

@media screen and (-ms-high-contrast: white-on-black) {
   .header{
      background: #000;
      color: #fff;
   }
}

첫 번째 예제와 비슷하지만이 방법은 white-on-black 전용 상태를 선택하고 헤더 색을 흰색 텍스트가있는 검은 색 배경으로 바꿉니다.

추가 정보 :

-ms-high-contrast Microsoft 문서

Internet Explorer 6 및 Internet Explorer 7 만 해당

Internet Explorer 6 및 Internet Explorer 7을 대상으로하려면 * 속성을 시작하십시오.

.hide-on-ie6-and-ie7 {
    *display : none; // This line is processed only on IE6 and IE7
}

IE6과 IE7에서는 영숫자가 아닌 접두사 (하이픈과 밑줄 제외)가 무시되므로 접두사는 고정되지 않은 property: value 쌍에 대해 작동합니다.

Internet Explorer 8 만 해당

Internet Explorer 8을 대상으로 선택기를 @media \0 screen { } 넣습니다.

@media \0 screen {
    .hide-on-ie8 {
        display : none;
    }
}

@media \0 screen { } 사이의 모든 것은 @media \0 screen { } 에 의해서만 처리됩니다.

IE6 및 IE7에 인라인 블록 지원 추가

display: inline-block;

inline-block 값을 가진 display 속성은 Internet Explorer 6 및 7에서 지원되지 않습니다.이 문제를 해결하려면 다음을 수행하십시오.

zoom: 1;
*display: inline;

zoom 속성은 요소의 hasLayout 기능을 트리거하며 Internet Explorer에서만 사용할 수 있습니다. *display 는 잘못된 속성이 영향을받는 브라우저에서만 실행되도록합니다. 다른 브라우저는 규칙을 무시합니다.