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

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

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

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

[기존]

<div style="display:inline-block;"></div>

[변경]

<div style="display:inline-block; zoom:1; *display:inline;"></div>

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

CSS핵에 대한 더 자세한 내용은 [css] IE 버전 별 CSS 핵 정리 을 참조하시기 바랍니다.

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