'IT'에 해당되는 글 75건
[CSS] IE7에서 display inline-block 사용법[CSS] IE7에서 display inline-block 사용법
Posted at 2016. 1. 5. 00:50 | Posted in IT/cssCSS로 Layout을 잡을 때 inline element 사이에 block element를 넣고 싶을 때가 있습니다.
하지만 div같은 block element를 사이에 넣는다면 새로 줄바꿈이 되어 element들이 포지셔닝하게 됩니다.
기본적으로 inline element가 block element를 포함할 수 도 없습니다.
그럴 때 inline-block display 속성을 사용한다면 원하는 방식으로 동작시킬 수 있을 것입니다.
inline-block 속성은 매우 유용한 속성임에도 불구하고 자주 사용되지 않고 있습니다.
IE7/FF2 등의 몇몇 브라우저에서 inline-block 속성이 구현되어 있지 않기 때문이죠.
하지만 핵을 사용해서 구현하는 방법이 있네요. a
IE에서는 아래처럼 IE 6/7 용 스타핵을 사용해서 inline 요소로 지정하고 IE전용속성 zoom:1을 지정하면
inline-block element처럼 동작한다고 합니다.
zoom:1; *display:inline
FF2에서는 아래처럼
display: -moz-inline-stack
속성을 지정하면 inline-block처럼 동작한다고 합니다.
그리고 vertical-align 속성으로 세로정렬 해주는 것도 잊지 말아야 겠네요.
브라우저마다 조금 다르게 나오네요.
'IT > css' 카테고리의 다른 글
[CSS] 초기화 코드 (0) | 2014.01.26 |
---|