IE8:overflowHidden] DIV 내에서의 drawing 정책..?

1)
<DIV 태그 내의 <TABLE 태그 등에
position:relative; 를 이용해, 한 페이지에 표시하려 시도했을 경우입니다.

.. 제가 가끔 만들고있는 코믹월드 배치도에서 오랫동안 나타난 현상이었죠. 

코믹월드 배치도 참고 (첨부파일 내용쪽) : http://club.cyworld.com/50832243116/184432945 
테스트 환경 : IE8. Windows XP Home Edition..

...

2)

<DIV style="FILTER: Alpha(opacity=80); WIDTH: 800px; HEIGHT: 250px; OVERFLOW: hidden">
<TABLE style="POSITION: relative; TOP: 0px; LEFT: 0px" border=0 cellSpacing=0 cellPadding=0 bgColor=white>
<TBODY>
<TR height=107>
<TD style="COLOR: black; FONT-SIZE: 9pt" vAlign=top width=80>0~106</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -107px; LEFT: 80px" border=0 cellSpacing=0 cellPadding=0 bgColor=gray>
<TBODY>
<TR height=107>
<TD style="COLOR: black; FONT-SIZE: 9pt" vAlign=top width=80>107~213</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -214px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=0 bgColor=white>
<TBODY>
<TR height=107>
<TD style="COLOR: gray; FONT-SIZE: 9pt" vAlign=top width=80>214~320</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -321px; LEFT: 240px" border=0 cellSpacing=0 cellPadding=0 bgColor=black>
<TBODY>
<TR height=107>
<TD style="COLOR: gray; FONT-SIZE: 9pt" vAlign=top width=80>321~427</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -428px; LEFT: 320px" border=0 cellSpacing=0 cellPadding=0 bgColor=gray>
<TBODY>
<TR height=107>
<TD style="COLOR: blue; FONT-SIZE: 9pt" vAlign=top width=80>428~534</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -535px; LEFT: 400px" border=0 cellSpacing=0 cellPadding=0 bgColor=blue>
<TBODY>
<TR height=107>
<TD style="COLOR: red; FONT-SIZE: 9pt" vAlign=top width=80>535~641</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -642px; LEFT: 480px" border=0 cellSpacing=0 cellPadding=0 bgColor=blue>
<TBODY>
<TR height=107>
<TD style="COLOR: black; FONT-SIZE: 9pt" vAlign=top width=80>642~748</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -749px; LEFT: 560px" border=0 cellSpacing=0 cellPadding=0 bgColor=blue>
<TBODY>
<TR height=107>
<TD style="COLOR: gray; FONT-SIZE: 9pt" vAlign=top width=80>749~855</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -856px; LEFT: 640px" border=0 cellSpacing=0 cellPadding=0 bgColor=blue>
<TBODY>
<TR height=107>
<TD style="COLOR: white; FONT-SIZE: 9pt" vAlign=top width=80>856~962</TD></TR></TBODY></TABLE>
<TABLE style="POSITION: relative; TOP: -963px; LEFT: 720px" border=0 cellSpacing=0 cellPadding=0 bgColor=blue>
<TBODY>
<TR height=107>
<TD style="COLOR: yellow; FONT-SIZE: 9pt" vAlign=top width=80>963~1069</TD></TR></TBODY></TABLE>

...

* iframe 만으로는 표현이 잘 안되는 것 같아서.. -> -- 참고링크 -- *

...

3)
간단히 얘기하자면, 

표시하는 element 의 원 위치가
상위 div 의 예상밖(?)을 벗어나면 그리지 않는 현상입니다. 

...

4)
이런 현상이 생기는 것을 막(?)고싶다면

document.write 로는 이런 현상을 막지 못하고, 
(이 경우는 html 에 적용했을 때와 동일시합니다)

[element].innerHTML 형태로 상위 div 내에 다시 그리거나,
.. 해당 내용 안에 selectAll 형태의 액션으로 다시 그려달라고 애원(?)하는 정도죠.

...

혹시나..싶어서 추가합니다만,

5)
div 내에 사용된 element 의
attrib 을 변경해도 크게 바뀌지는 않습니다. (예를 들면, bgcolor 라든지..)

기존 element 의 원위치가 중요하고,
상위 div 의 기분(?)이 중요할 뿐이죠. 

(그러고보니, 상위 div 의 style 이나 attrib 변경할 생각은 못해봤군요..)

...

easyBow killofki@.