티스토리 뷰
▲ 일반 브라우저에서 정상 출력되는 모습(좌) / IE6에서 select에 가려진 현상(우)
하지만 css만으로도 div가 select에 가려지지 않게 만들 수 있다. 해답은 비어있는 iframe 을 부유된 div와 같은 위치로 넣으면 된다는 것.
위 예제의 코드는 아래와 같다.
<div style="position:relative;">
<div style="position:absolute; background:#e9e9e9; border:1px solid #000; height:100px; width:100px; padding:10px;">
내용
</div>
</div>
<br />
<br />
<select>
<option>어쩌구 어쩌구 어쩌구 어쩌구</option>
</select>
<div style="position:absolute; background:#e9e9e9; border:1px solid #000; height:100px; width:100px; padding:10px;">
내용
</div>
</div>
<br />
<br />
<select>
<option>어쩌구 어쩌구 어쩌구 어쩌구</option>
</select>
해결책
여기에 아래와 같이 굵은 글씨로 된 코드처럼 비어있는 iframe을 부유된(absolute) div와 같은 사이즈로 추가하면 된다.
<div style="position:relative;">
<iframe style="position:absolute; background:#e9e9e9; height:102px; width:102px; padding:10px;"></iframe>
<div style="position:absolute; background:#e9e9e9; border:1px solid #000; height:100px; width:100px; padding:10px;">
내용
</div>
</div>
<br />
<br />
<select>
<option>어쩌구 어쩌구 어쩌구 어쩌구</option>
</select>
<iframe style="position:absolute; background:#e9e9e9; height:102px; width:102px; padding:10px;"></iframe>
<div style="position:absolute; background:#e9e9e9; border:1px solid #000; height:100px; width:100px; padding:10px;">
내용
</div>
</div>
<br />
<br />
<select>
<option>어쩌구 어쩌구 어쩌구 어쩌구</option>
</select>
(위 예제에서는 iframe의 높이와 너비에 border를 안 쓰는 대신 2px씩 늘려줬다)
제대로 했다면, 위 화면 처럼 IE6에서도 원하는 결과물을 얻을 수 있을 것이다.
단점과 한계
absolute된 div의 너비는 흔히들 지정하지만, 높이는 유동적인 경우 때문에 지정하지 않는 경우가 많다. 그러나 위 예제에서 사용된 iframe에는 div처럼 내용을 넣을 수 없을 뿐더러 내용을 넣는다 하더라도 높이가 변하지 않는 문제가 있다.
따라서 이 해결책은 높이가 어느정도 제한되어 있는 경우에만 사용하길 추천한다.
'CSS/UI' 카테고리의 다른 글
| IE6에서 a태그 사용시 밑줄이 너무 붙어버리는 현상 (0) | 2010.01.18 |
|---|---|
| IE6에서 div가 select에 가려지는 현상 해결법 (0) | 2010.01.05 |
| IE6,7 에서 position:relative, position:absolute 속성의 z-index 버그 (4) | 2009.06.15 |
| 크롬(Chrome) 2.0 에서 CSS 해석 문제 (1) | 2009.05.28 |
댓글