Page history of IE CSS Hack

IE 조건부 주석

조건부 주석이란 IE를 제외한 브라우져에서는 주석으로 처리하지만 IE에서는 버전에 따라 실제 코드로 인식하는 주석을 말한다.

이를 이용해 각각의 IE 버전에 따라 최적화된 코드를 적용할 수 있다.

 

예를 들어 IE 6 인 경우에만 적용하고픈 css 가 있다면 아래 처럼 IE 6 를 위한 css 를 따로 지정해 줄 수 있다.

    <!--[if IE 6]>
         <link href="css/ie6.css" type="text/css" rel="stylesheet" />
     <![endif]-->

 

형식

<!--[if expression ]> HTML <![endif]-->

IE가 아닌 브라우져에서는 모두 주석으로 처리하지만 IE는 조건부 주석으로 인식하고 expression 에 따라 HTML 을 인식한다.

 

if 문에 사용 가능한 조건 목록

• [if IE 6] : IE 6 인 경우
• [if !IE 6] : IE 6 가 아닌 경우
• gt : "greater than" 높은. 예) [if gt IE 6] : IE 6 보다 높은 경우
• gte : "gteater than or equal to", 같거나 높은.
• lte : "less than or equal to", 같거나 낮은.
• lt : "less than" 낮은.

Attribute Hack

먼저 표준 호환 브라우저에 서 일반적인 속성으로 맞춘 후 IE7, IE8을 보면서 차이가 나는 부분에는 속성에 #을 붙이면 표준호환 브라우저에서는 무시되지만 IE에는 반영된다. 그리고 마지막으로 IE6를 보면서 안 맞는 부분에 속성에 _를 붙여서 추가하면 IE6에만 적용되고 나머지에는 적용되지 않는다. IE6의 width 버그 등을 수정하기에 가장 좋은 방법

1. width: 300px; /* 표준 호환 브라우저 */
2. #width: 300px; /* IE 전용 */
3. _width: 302px; /* IE6 */
4. *width: 302px; /* IE5~7 */