사이트 내 전체검색
[IE6버그] 작은 높이의 CSS height (팁)
최고관리자
https://cmd.kr/html/150 URL이 복사되었습니다.

본문

아직도 MSIE6 사용자가 많다. 현재 블로그 방문자 1,176명의 통계로 대부분 MSIE 웹브라우저로 사용자중 MSIE6을 사용한 사람들의 비율은 무려 37%에 해당된다. IE6에 지원할 수 있게 하려면 이리저리 골치 아픈 일들이 꽤 있다.

1px의 높이의 선을 div로 만들어 사용하려는 전혀 되지 않는 것이었다. width:1px을 잘 작동된다.

또 하나의 문제는 MSIE6의 CSS에서 height 속성은 마치 min-height 처럼 작동하는 것 같다. 어찌되었든 1px 높이의 div 요소를 사용하려 했는데...결과가 다음과 같이 나왔다. ㅋ 따로 CSS로 MSIE6만 해결하려면 다른 문서에 정리한 핵을 사용하는 방법도 있다.

1 <div class="resize-bottom" style="height:1px;background:#0f0;">
2 </div>

MSIE6-result.png

쩝... line-height를 1px로 잡는 등 여러방법을 동원했지만 답이 안나왔다.

[1] 해결 : hr요소의 대신 사용

그래서 hr 요소로 대신 사용하기로 했다. hr요소에 딱히 색상 요소로 사용할 css 속성이 생각이 나지 않는다. 전경(foreground) 색상이 사용되기를 바라면 무식하게 color 속성을 잡았더니 border가 그렇게 반응하듯 이놈도 역시 맞게 반응되었다.


그러나 1px div는 앞으로 윈도우 테두리를 다시 그리기 위해서 hr기능에만 맞는 수평선이 아닌 수직까지 모두 만들어 사용해야 하기에 div 요소로 통일 시키는 것이 좋을 것 같다.


[2] 해결 : overflow:hidden 추가

구글로 검색했더니 Setting Div Height in IE6 에 답메일이 있었다. overflow:hidden 까지 추가되면 왠지 좀더 완벽한 모습인 것 같으나 이미 요소 내부의 텍스트가 없는 것이 확실하기에 귀찮을 따름이다. 그러나 IE7, IE8에서 이러한 문제는 해결되었고 사용하지 않아도 되지만 IE6사용자를 위해 추가해야겠다.

1 <div class="resize-bottom" style="overflow:hidden;height:1px;background:#0f0;">
2 </div>

댓글목록

등록된 댓글이 없습니다.

Search

Copyright © Cmd 명령어 3.143.214.56