[CSS] IE7, IE8 호환성 보기 모드에서 display:inline-block; 사용하는 방법

IE 8버전 호환성보기 모드와 IE7에서는 display:inline-block; 이 지원되지 않습니다. 레이아웃을 잡는데 자주 사용되기 때문에 쓰지 않을 수 없는 코드입니다.

이를 사용하기 위해서는 IE에 적용되도록 CSS 핵을 사용해야합니다. 아래는 IE8 호환성보기와 IE7에 적용할 수 있는 display:inline-block의 CSS 핵입니다.

[기존]

[변경]

위와 같이 zoom:1과 *display:inline; 을 추가해주시면 되고 display앞에 *은 IE7(IE8 호환성보기)에서만 적용될 수 있도록 하는 CSS핵 입니다.

CSS핵에 대한 더 자세한 내용은 [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;}