웹마스터 팁
ie6 빈div 높이 조절
2011.06.19 15:44
사이트를 꾸미려다 보면 내용이 없는 빈 div를 만들고 거기에 배경처리를 하는 경우가 종종 있습니다.
그럴경우 높이가 낮을때(보통 10px 이하) 다른 브라우져는 다 문제 없는데 유독 ie6만 원하는 높이 이하로 안줄어 드는 경우가 있습니다.
지금까지 그런경우 정확한 원인 파악을 못하고 전 overflow:hidden을 처리해 왔는데
오늘 알게된게 font-size가 원인인거 같더군요.
뭐 overflow:hidden을 처리해도 되지만 font-size:0 으로 잡아 버리면 굳이 overflow:hidden 처리 안하더라도 낮은 높이의 div가 ie6 에서 원하는 높이 이상으로 커지는 일은 없을거 같습니다.
많은 분들이 아실거같은데...
오늘 알게 된 내용이라 올려 둡니다.
그럴경우 높이가 낮을때(보통 10px 이하) 다른 브라우져는 다 문제 없는데 유독 ie6만 원하는 높이 이하로 안줄어 드는 경우가 있습니다.
지금까지 그런경우 정확한 원인 파악을 못하고 전 overflow:hidden을 처리해 왔는데
오늘 알게된게 font-size가 원인인거 같더군요.
뭐 overflow:hidden을 처리해도 되지만 font-size:0 으로 잡아 버리면 굳이 overflow:hidden 처리 안하더라도 낮은 높이의 div가 ie6 에서 원하는 높이 이상으로 커지는 일은 없을거 같습니다.
많은 분들이 아실거같은데...
오늘 알게 된 내용이라 올려 둡니다.
댓글 2
-
엘카
2011.06.19 18:27
-
ForHanbi
2011.06.20 01:10
오랫만에 사용팁을 읽다보니 엘카님의 주옥같은 글들이 많더군요.
뭐 윗글을 엘카님이 말씀하신거 처럼 overflow:hidden으로 처리해도 될거 같습니다.
저도 죽 그리 처리해 왔으니...
그동안 왜 ie6은 낮은 높이가 안잡히나 궁금했었는데 오늘에야 텍스트가 없더라도 font-size 가 잡힌다는 사실을 알고 속 시원해서 올린글이었습니다.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 다음view(다음뷰) 애드온 사용시 댓글창의 뷰아이콘 지우기 [1] | 하늘종 | 2011.05.31 |
| 레이아웃 100% 일때 이미지리사이즈 Addon 넓이값 고정하기 | 고수군 | 2011.06.08 |
| 스킨에서 조건/반복문 여러줄 사용하기 [1] | 엘카 | 2011.06.10 |
| 홈페이지 접속시 XE를 바로 실행하기(XE를 /xe/ 폴더에 설치한 경우) [5] | Firstlove | 2011.06.12 |
| ie6 빈div 높이 조절 [2] | ForHanbi | 2011.06.19 |
| 템플릿 변수(조건문) 팁 [1] | 엘카 | 2011.06.19 |
| XML필터 사용시 유효성검사에서 사용자정의 메세지 출력하기 | 창한이 | 2011.06.19 |
조회수 클릭때마다 올라가기(1.4.5.7 버전에서 되네요)
[2]
 | 아네모네 | 2011.06.20 |
| 레이아웃에서 class="header" 사용 안하기... [2] | ForHanbi | 2011.06.30 |
| 글작성후 목록으로 이동하기 [8] | ezi | 2011.07.08 |
| 포인트복권모듈 포인트 중복수령을 차단하는 간단한 팁 [4] | 나뚜르 | 2011.07.10 |
| 비로그인시 본문대신 지정문구 보이기 [1] | 도라란 | 2011.07.11 |
| 글에 첨부된 이미지 파일이 없을 경우, 지정 이미지를 본문에 보여주기 | 도라란 | 2011.07.11 |
| 미디어(이미지,플래시 등) 파일 무단링크 차단 [8] | 도라란 | 2011.07.11 |
| 글작성후 목록으로 이동하기 팁이 정상동작하지 않을 경우 [2] | 도라란 | 2011.07.14 |
|
모든게시판에서 글등록할때 Duplicat entry 'XXX' for key 1 오류 해결방법
[2]
| 토끼매니아 | 2011.07.22 |
| 최근 댓글 위젯에 댓글 작성자 이름 표시하기 | Treasurej | 2011.07.22 |
| 알수없는 여백(공백,마진)이 생기는 문제 해결법 - 초보님용 [1] | 주영수 | 2011.07.23 |
| 유튭 비디오를 XE에 올리는 아주 간단한 방법 [1] | 유샤인 | 2011.07.23 |
| RefTagger (영어 성경 본문 출력기)를 설치하는 쉬운 방법 | 유샤인 | 2011.07.23 |
<div style="height:5px; overflow:hidden;"></div> <!-- 해결 -->
<div style="height:5px; font-size:0; line-height:0;"></div> <!-- 본문 -->
표준 브라우저는 block 요소의 크기(너비/높이)를 정했을 때 내용물이 넘쳐도 늘어나지 않습니다.
ie6 은 block 요소의 크기를 정해줘도 overflow:hidden;속성을 사용하지 않으면 크기가 늘어날 수 있구요.
ie6의 버그를 적절하게 이용한 예가 min-height 가 있죠. (제가 제일 좋아하는 크로스 브라우징 기법)
#element { min-height:500px; height:auto !important; height:500px; }
표준 브라우저는 min-height:500px; ie6에서는 높이가 500px 이지만 내용물이 많을 경우 높이가 늘어나므로 min-height 속성과 동일.
다시 본론으로 돌아와서.. 전 overflow:hidden 에 한표요 ㅋ