IE6,7 목록에서 사이드뷰 겹침 문제 대응 정보
마크업 IE6,7 목록에서 사이드뷰 겹침 문제 대응본문
목차
문제인식
윗 행의 사이드뷰를 클릭하면 일반적으로 사이드뷰의 항목이 일정수 이상이어서 아래 행까지 늘어지는 경우가 많습니다.
최근의 브라우저는 이 경우 윗 행에서 생성된 사이드뷰가 아래 행의 내용에 가려지지 않도록 출력해주는데, IE6,7 은 가려지는 현상이 발생하고 있습니다.
이렇게 아래 행의 내용에 사이드뷰가 가려지면 해당 영역을 클릭할 수도 없고, 글자도 겹쳐서 정확한 의미를 파악하기 어려워지기도 합니다.
해결방안
일단 문제 해결을 위해 왜 이런 현상이 나타나는지 가설을 세워보기로 합니다.
아마도 IE6,7 에서 table 내 td는 다음과 같은 방법으로 랜더링(?) 되는 것으로 여겨집니다.
- table에서 각 행의 td는 나중에 랜더링될 수록 높은 z-index 값을 갖을 것이다.
- 시각적으로 윗 행의 td는 아래 행에 위치한 td 보다 z-index 값이 작을 것이다.
- 그래서 윗 행의 td 에 포함된 사이드뷰sv 역시 아래 행에 위치한 td 보다 z-index 값이 작을 것이다.
그렇다면, 윗 행에서 사이드뷰를 포함한 td의 z-index 값을 아래 행에서 사이드뷰를 포함한 td 보다 크게 만들어주면 되지 않을까요?
관련코드
게시판 basic 스킨을 예로 들면,
/skin/board/basic/list.skin.php 에서 이름 출력 부분 td에 class="td_name"을 지정하기만 하면 됩니다.
<td class="td_name"><?=$list[$i]['name']?></td>
이때, class를 다르게 지정하고 싶다면, 지정한 class에 맞춰, /tail.sub.php 의 다음 부분도 수정을 해주셔야 합니다.
<!-- ie6,7에서 사이드뷰가 게시판 목록에서 아래 사이드뷰에 가려지는 현상 수정 --> <!--[if lte IE 7]> <script> $(function() { var $td_name = $(".td_name"); // 이 부분의 $(".td_name"); 을 지정한 class 로 수정 var count = $td_name.length; $td_name.each(function() { $(this).css("z-index", count); $(this).css("position", "relative"); count = count - 1; }); }); </script> <![endif]-->
게시판 목록과 동일한 유형으로 사이드뷰가 포함되는 부분에서는 모두 위의 방법을 따라 마크업하시면 됩니다.
알려진 문제점
- IE6 에서 border-collapse:collapse 스타일을 가진 table 에 position:relative 스타일을 가진 td 가 포함될 경우 일부 스타일이 깨지는 문제점이 보고되었습니다. IE6 버그리포트
이 문제점을 해결하시려면 table 의 border-collapse:collapse를 border-collapse:separate로 변경하시면 됩니다.
추천
0
0
댓글 2개
고생이 많으시내요
.td_name 이 .sv_use 로 변경될 예정입니다. - 4.0b26