Shine your spell on me

블록 레벨 요소에 사용하기

display: inline-block 은 인라인 요소처럼 흐르면서 블록 요소 처럼 width, height, padding, margin등을 사용할 수 있는 편리해 보이는 속성이다.

하지만 FF2가 inline-block을 지원하지 않았으며
IE6, IE7은 인라인 요소(span, strong 등)일때만 정상적으로 표현하고, 블록 요소(div, p 등)에서는 단순히 display: block 처럼 랜더링하여 사용할 수 없었는데,
Cross-Browser Inline-Block 에서 CSS 핵을 이용하여 블록 요소에 inline-block 속성을 사용하는 크로스 브라우징을 소개했다. 최근 업데이트 된 FF3가 inline-block을 지원하는 점을 감안하여 FF 전용 핵을 삭제하면 아래와 같다.


이렇게하면 FF3, IE8, IE7, IE6, Opera, Safari, Chrome에서 블록 요소(div, p 등)에 inline-block의 효과를 사용 할 수 있게 된다.

inline-block 예제의 초록색 박스들은 ul과 li로 구성되었으며, li에 inline-block 속성을 주어 박스 높이에 상관없이 마치 인라인 요소들 처럼 정렬되고, float과는 다르게 ul에 text-align: center 속성을 사용하여 가운데 정렬까지 가능하다.

단, IE6, IE7에선 margin-right, margin-left 값이 다른 브라우저에 비해 3px 넓게 조정된다.
결국 *margin-right: 14px 과 같이 핵을 사용하지 않으면 크로스 브라우징이 불가능;ㅂ ;

인라인 요소에 사용하기

사실 IE6, IE7은 인라인 요소에서는 inline-block을 정상적으로 랜더링 한다.
이번 FF3에서 inline-block을 지원하게 된 것을 계기로 실제로 사용 할 수 있을까 테스트 해보았는데, 별다른 핵이나 꼼수없이 inline-block을 사용 할 수 있었지만, 문제는 vertical-align 정렬이다.




vertical-align 속성 중 top, middle, bottom값은 브라우저마다 (주로 오페라, 사파리, IE6, IE7에서) 너무 다르게 표현되어 사용 할 수 없었고, vertical-align: 30px 와 같이 px값을 주는 경우에는 IE6, IE7의 폭이 다른 브라우저에 비해 넓어서 *vertical-align: 22px 와 같은 핵이 필요하다.


그렇지 않으면 inline-block을 사용할 인라인 요소와 부모가 같은 다른 모든 인라인 요소에 span등의 마크업을 추가하여 vertical-align값을 주어야 한다;ㅂ ;

IE8 버그

여차 저차 해서 inline-block을 사용한다 하더라도, IE8에서만 나타나는 오류에 부딪히게 된다.
오류사항과 그에 대한 해결책을 자세하게 설명된 블로그가 있다.
IE8 inline-block 버그



참 편리한 속성인데, 브라우저의 미지원이나 브라우저에 따라 다르게 랜더링되는 바람에 CSS 핵 없이는 사용 할 수가 없네;ㅂ ;