[css] IE 버전 별 CSS 핵 정리

[css] IE 버전 별 CSS 핵 정리

IE6부터 IE9까지 자주 쓰이는 CSS 핵을 정리해봤습니다.
IE6은 버리는 추세이고 IE8이상으로는 어느 정도 타 브라우저와 호환성이 준수한 편입니다. 하지만 IE7은 국내에서 아직까지 가장 많이 사용되고 있지만 IE6 수준과 버금가는 호환성을 지니고 있기에  무시 할 수 없습니다.

IE7 위주로 CSS핵을 잘 숙지해두시더라도 코딩 작업에 도움이 많이 될겁니다.
(핵은 예시 구문에 주황색으로 표시했습니다.)

단일 적용 핵

IE6
언더스코어 핵 (underscore hack) – 적용 범위 : property
=> div{_width:150px; _height:70px;}

 

IE7
*+html body 핵 – 적용 범위 : selector
=> *+html body div{width:100px; height:50px;}

*:first-child+html 핵 – 적용 범위 : selector
=> *:first-child+html div{width:100px; height:50px;}

 

IE8
괄호 핵 – 적용 범위 : property
=> div{width:100px; ()height:50px;}

 

IE9
:root ~ \0/IE9 핵 – 적용 범위 : selector + property
=> :root div{width:100px \0/IE9; height:50px \0/IE9;}

 

공통 적용 CSS 핵

IE6, IE7
스타 핵 (star hack)
 – 적용 범위 : selector
=> *div{width:150px; height:70px;}

닷 핵 (dot hack) – 적용 범위 : property
=> div{width:150px; .height:70px;}

 

IE6, IE7, IE8
\9 핵
 – 적용 범위 : property
=> div{width:100px; height:50px\9;}

 

IE7, IE8, IE9
html>body 핵 – 적용 범위 : selector
=> html>body div{width:100px; height:50px;}

 

IE8, IE9
\0/IE8+9 핵
 – 적용 범위 : property
=>div{width:100px \0/IE8+9; height:50px \0/IE8+9;}

%d 블로거가 이것을 좋아합니다: