IE6에서 레이어 위로 셀렉트박스가 뚫고 나오는문제

IE6에서 셀렉트 박스는 상위에 존재합니다.

존재하다 못해 뚫고 나와버리는 문제가 있습니다. 이럴때 해결방법 입니다.

레이어팝업 일수도 있고, 툴팁같은 형태일수도 있습니다.

여러방법이 있지만, 제가 사용해본 것중에 가장 괜찮은 방법인거 같아서 소개해봅니다.

해결방법

1. 먼저 CSS에 아래 내용을 추가합니다.

 iframe.ie6_select {  
    position:absolute;   
    bottom:-3px;  
    left:-3px;  
    z-index:-99; /* 기존 레이어보다 뒤에 위치시킴 */ 
    width:100px;  
    height:100px;  
    border:0;
    filter: alpha(opacity=0); /* IE에서 테두리없앰 */ 
} 

가로,세로사이즈는 보여지는 레이어에 맞게 수치를 수정합니다.

타브라우저는 border:0; 으로 테두리를 없애주고, IE6은 filter: alpha(opacity=0); 로 테두리를 없애줍니다.

2. 레이어가 보여져야하는 부분에 아래와 같이 코딩합니다.

<div> 
    들어갈내용
    <iframe class="ie6_select" title="내용 없는 프레임"></iframe> 
</div> 

iframe 을 들어갈 내용 마지막에 추가해줍니다.

전체를 감싸고 있는 div 에는 class가 들어갈수도 있고 id 가 들어갈수도 있습니다.

만약 레이어팝업이 오버시나 클릭시 보여지게 될경우는 div style="display:none;" 이런식으로 들어 가는경우도 있겠네요.

그리고 프레임에 title 을 작성해주는것도 염두해주세요.. 접근성향상에 좋습니다.

내용이 없는 프레임은 내용이 없는 프레임이라고 작성해주시면 됩니다.