IE에서 셀렉트 박스 위에 DIV를 이용한 레이어를 올릴 경우 셀렉트 박스가 가려지지 않는 문제가 있었다. 이 문제 때문에 많은 개발자들이 기존에 내놓은 여러 해결책들이 존재한다.
이러한 문제의 원인은 IE에서 태그 종류 중에 z-index가 최상위인 것들이 존재하기 때문에 일어난다. SELECT, OBJECT, IFRAME 등이 그것이다.
그간의 해결책은 HTC Behavior를 이용한 사용자 셀렉트 박스 구현하거나 레이어가 표시될 때 뒤에 보여져야 할 셀렉트 박스를 숨기는 것, DIV 안에 IFRAME을 넣고 그 IFRAME 안에 레이어 내용을 구성하는 방법 등이 있었다.
근래에 찾은 방법은 방법은 SELECT 위에 IFRAME을 올리고 그 위에 DIV를 올리는 것이다. SELECT와 IFRAME이 모두 최상위 z-index라는 것을 이용한 것으로 반투명 레이어까지 올릴 수 있다는 장점이 있다. 소스는 다음과 같다.
<select>
<option>This usually appears on top in IE</option>
</select>
<iframe src="about:blank" mce_src="about:blank" scrolling="no" frameborder="0"
style="position:absolute;width:50px;height:90px;
top:0px;left:0px;z-index:0;
border:none;display:block"></iframe>
<div
style="position:absolute;width:50px;height:90px;
top:0px;left:0px;z-index:0;
border:solid 1px black">
This appears in front of the select in IE
</div>위 내용을 보면 IFRAME과 DIV의 z-index를 비롯한 모든 크기를 같게 해주고 DIV를 IFRAME 다음에 표시되도록 하고 있다. 반투명 레이어로 만드는 방법은 IFRAME의 스타일에서 투명도(Alpha Filter)를 0으로 해주는 것으로 가능하다.
추천 : 