목차

1. 문제인식
2. 해결방안
3. 관련코드
4. 알려진 문제점

문제인식

윗 행의 사이드뷰를 클릭하면 일반적으로 사이드뷰의 항목이 일정수 이상이어서 아래 행까지 늘어지는 경우가 많습니다.
최근의 브라우저는 이 경우 윗 행에서 생성된 사이드뷰가 아래 행의 내용에 가려지지 않도록 출력해주는데, IE6,7 은 가려지는 현상이 발생하고 있습니다.
이렇게 아래 행의 내용에 사이드뷰가 가려지면 해당 영역을 클릭할 수도 없고, 글자도 겹쳐서 정확한 의미를 파악하기 어려워지기도 합니다.

해결방안

일단 문제 해결을 위해 왜 이런 현상이 나타나는지 가설을 세워보기로 합니다.
아마도 IE6,7 에서 table 내 td는 다음과 같은 방법으로 랜더링(?) 되는 것으로 여겨집니다.

1. table에서 각 행의 td는 나중에 랜더링될 수록 높은 z-index 값을 갖을 것이다.
2. 시각적으로 윗 행의 td는 아래 행에 위치한 td 보다 z-index 값이 작을 것이다.
3. 그래서 윗 행의 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]-->

게시판 목록과 동일한 유형으로 사이드뷰가 포함되는 부분에서는 모두 위의 방법을 따라 마크업하시면 됩니다.

알려진 문제점

1. IE6 에서 border-collapse:collapse 스타일을 가진 table 에 position:relative 스타일을 가진 td 가 포함될 경우 일부 스타일이 깨지는 문제점이 보고되었습니다. IE6 버그리포트
   이 문제점을 해결하시려면 table 의 border-collapse:collapse를 border-collapse:separate로 변경하시면 됩니다.