IE에서 display:none인 element를 toggle할때(block/none) IE에서 전 과 후의 여백이 틀려지는 상황이 발생하는 경우가 있는데
사용자 삽입 이미지

이럴때 해결책은 min-height를 넣어주면 된다.

IE6은 min-height를 지원않으므로 어쩔 수 없이 Hack을 써야한다.

height:37px; /* IE6 */
height /**/:auto; /* FF, IE7 */
min-height:37px; /* FF, IE7 */

height만 적어주어도 되지 않느냐~? 란 의문이 들 수 도 있겠지만 그렇게 되면 display:none인 element가 block(show)상태가 되었을때 position:absoulte된 것 처럼 위에 덮어쓰게 된다.
사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/101 관련글 쓰기

댓글을 달아 주세요


<div onclick="this.style.display = 'none'">disply</div>
<div onclick="this.style.visibility = 'hidden'">visibility</div>
<div>block</div>
<ul>
    <li onclick="this.style.display = 'none'">disply</li>
    <li onclick="this.style.visibility = 'hidden'">visibility</li>
    <li>block</li>
</ul>

display visibility 모두 펼쳐진 상태

visibility
속성을 hidden으로 지정할 경우 해당 Element만큼 여백으로 남겨 흔적을 남기게 됩니다.
상단 문구 참고

display 속성값을 none으로 지정했을 경우 visibility:hidden과 달리 흔적도 남기지 않습니다. ㅎㅎ
상단 문구 참고


참고링크 #1 http://www.w3.org/TR/CSS21/visuren.html#propdef-display
참고링크 #2 http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/88 관련글 쓰기

댓글을 달아 주세요