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 버그 등을 수정하기에 가장 좋은 방법
- width: 300px; /* 표준 호환 브라우저 */
- #width: 300px; /* IE 전용 */
- _width: 302px; /* IE6 */
- *width: 302px; /* IE5~7 */