마크업개발 메모장

ie7에서 inline-block 사용하기 본문

HTML/CSS

ie7에서 inline-block 사용하기

parra 2015. 3. 12. 11:33

ie7을 맞춰보자~


block속성을 inline-block으로 작업한 후 ie7에서 확인해보면 깨진다.


그래서 찾아봤다. 방법이 있긴 있었다!!


바로 요것~! div {display:inline-block; zoom:1; *display:inline;}


ie7에서는 inline속성을 inline-block으로 바꿀순 있지만 block속성을 바꿀순 없다.

그래서 block속성을 inline-block으로 바꾸기 위해 핵을 써야한다.

ie7 핵 *display:inline;으로 block을 inline 속성으로 바꾸고  

block 성질도 가져야하니 zoom:1로 hasLayout이라는 고유한 성질(레이아웃)을 부여해준다.

고로 inline이지만 레이아웃을 가지다 보니 inline-block성질이 되는 것이다.



zoom:1을 알아보다 보니 더 깊이 알게된 점이 있다.


hasLayout란? 

IE 5~7 브라우저에서 레이아웃을 부여해주는 것인데 

기본으로 부여해주는 요소도 있지만 그렇지 않은 요소에는 레이아웃을 부여해주는 css속성을 적용 해줘야 한다.

여러가지 속성중에 zoom:1 속성이 고유한 레이아웃을 갖도록 해준다.

(알아보니 float을 해제하는 트리거로 작용하는 성질을 갖는다고 한다.)


기본적으로 Layout을 갖는다고 알려진 요소

<html>, <body>

<table>, <tr>, <th>, <td>

<img>

<hr>

<input>, <button>, <select>, <textarea>, <fieldset>, <legend>

<iframe>, <embed>, <object>, <applet>

<marquee>


Layout을 갖게 만드는 CSS 속성

position: absolute

float: left|right

display: inline-block

width: ‘auto’ 외의 모든 값

height: ‘auto’ 외의 모든 값

zoom: ‘normal’ 외의 모든 값 (IE 전용)

writing-mode: tb-rl (IE 전용)

overflow: hidden|scroll|auto (IE7만 적용됨)

overflow-x|-y: hidden|scroll|auto (IE7만 적용됨)


자세한 설명은 http://blog.wystan.net/2007/08/14/understanding-haslayout-property-and-holly-hack


저작자표시 비영리 변경금지 (새창열림)

'HTML/CSS' 카테고리의 다른 글

CSS3 transform으로 zoomin 효과 내기  (0) 2015.07.17
br 사용 안하고 white-space로 줄바꿈 하기  (0) 2015.03.21
html css로 footer 하단에 고정하기  (0) 2015.02.05
CSS3 animation를 이용한 이미지 움직이기  (0) 2014.11.19
CSS3 transition 속성  (0) 2014.11.17
'HTML/CSS' Related Articles more