Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

IE6에서 select박스가 레이어 위로 나왔을경우 본문

Web publishing/웹 표준

IE6에서 select박스가 레이어 위로 나왔을경우

BeOne 2011. 9. 7. 17:07
이번에 이야기 하고자 하는 IE6 버그 중 하나인 select 박스 위에 레이어를 올렸을 때 나타나는 현상에 대해 알아보겠습니다.

화면상 예를 보면 

IE6 일 경우
select.gif

IE7 일 경우
select-11.gif

소스를 보면 다음과 같습니다.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
</head>
<script type="text/javascript">
<!--
 
//-->
</script>
<style type="text/css">
body { 
 margin:0; 
 padding:0
}

ul,li { list-style:none}
.select { padding: 30px}

#pop-up { 
 float:left;
 position:absolute;
 top:0px; left:0px;
 width:300px;
 height:100px;
 margin:0;
 padding:0;
 border:1px solid #ccc;
 background:#f9f9f9
}

#pop-up ul {
 padding:0 10px;
 margin:0;
 
}
  
#pop-up li { 
 float: left;
 text-align: left;
 width: 100%;   
 padding:3px 0;
 margin: 0;
 font-size:12px;
 color:red
} 
</style>
<body>
 <div class="select">
  <select id="">
   <option value="" selected="selected">explorer 6</option>
   <option value="">explorer 7</option>
  </select>
 </div>
 <div id="pop-up">
  <ul>
   <li>IE6에서 select박스가 레이어 위로 나왔을경우</li>
  </ul>
 </div>
</body>
</html>


수정을 하기 위해 소스를 고치겠습니다.

html수정
                                    수정전                                    수정후
<div id="pop-up">
  <ul>
   <li>IE6에서 select박스가 레이어 위로 나왔을경우</li>
  </ul>
</div>		 <div id="pop-up">
  <ul>
   <li>IE6에서 select박스가 레이어 위로 나왔을경우</li>
  </ul>
  <iframe></iframe> <-- ifame 를 추가했습니다.
 </div>

CSS 추가
#pop-up iframe { 
 position: absolute;
 top:0; left:0;
 z-index:-1;
 filter:mask(); <- IE용  css 필터 입니다...다른 곳에서는 먹지 않습니다.
}

이렇게 적용을 하고 화면을 보면 다음과 같습니다.
select-11.gif

화면이 정상적으로 나왔습니다. 저도 어떻게 해야 하는지 고민도 많았는데, iframe으로 간단히 해결을 했습니다.
작업을 하실때 많은 도움이 되었으면 좋겠습니다.

단, IE6 에서 적용 되는지만, IE6 버전 이하에서는 적용이 안 될수도 있습니다.

출처 :  http://nk.webmini.net/?mid=textyle&document_srl=242905
저작자표시

'Web publishing > 웹 표준' 카테고리의 다른 글

크롬, 사파리 테이블 col width %값 인식 bug- position:absolute 오류  (0) 2013.02.27
ie6에서 png파일 투명하게 하기[DD_belatedPNG]  (0) 2011.09.22
li 공백 생기는 문제 해결 (이미지 있을경우)  (0) 2011.04.05
IE7 li 에 이미지 사용시 벌어지는 문제 해법  (0) 2010.11.25
웹표준, 웹접근성 세미나  (0) 2010.05.29
'Web publishing/웹 표준' Related Articles more