[펌글] ie7에서 display inline-block 사용하기

By | 9월 12, 2012

- 출처 :  
http://dancer.tistory.com/126  -

CSS로 Layout을 잡을 때 inline element 사이에 block element를 넣고 싶을 때가 있습니다.
하지만 div같은 block element를 사이에 넣는다면 새로 줄바꿈이 되어 element들이 포지셔닝하게 됩니다.
기본적으로 inline element가 block element를 포함할 수 도 없습니다.
그럴 때 inline-block display 속성을 사용한다면 원하는 방식으로 동작시킬 수 있을 것입니다.
inline-block 속성은 매우 유용한 속성임에도 불구하고 자주 사용되지 않고 있습니다.
IE7/FF2 등의 몇몇 브라우저에서 inline-block 속성이 구현되어 있지 않기 때문이죠.
하지만 핵을 사용해서 구현하는 방법이 있네요. 

아래는 관련 글입니다.
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/


IE에서는 아래처럼 IE 6/7 용 스타핵을 사용해서 inline 요소로 지정하고 IE전용속성 zoom:1을 지정하면
inline-block element처럼 동작한다고 합니다.

zoom:1; *display:inline


FF2에서는 아래처럼

display: -moz-inline-stack 
속성을 지정하면 inline-block처럼 동작한다고 합니다.
그리고 vertical-align 속성으로 세로정렬 해주는 것도 잊지 말아야 겠네요.
브라우저마다 조금 다르게 나오네요.
좋네요.


Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments