[IE6] select 박스가 레이어를 뚫는 버그-css와 iframe으로 해결하기, z-index버그
로빈아빠
본문
위는 select 박스가 sub 메뉴를 뚫는 버그 IE6
금욜에 그냥 집에서 해결하자고 해놓고 술퍼마시고 집에서 빈둥대다가
끄적거리니깐 잘 안되더라..더더욱 집에선..그래서 아침일찍 회사나와서 초집중하고 보고있는데
역시나 안되더라..나 완젼 자포자기 하는 심정으로 딴거 하고 있다가....
갑자기!!갑자기..번뜩..내가 바보같았다라는 생각을 했다..역시나..난 어리석은 짓을 했다.
http://nofence.kr/blog/107?category=3 치프님의 블로그를 자세히 보면서
왜 난 안되지를 몇번을 들여다 보고 외국 사이트를 몇번이고 보고,,구글 검색을 몇번이고 해봐도 안되던게 되더이다..왜? 생각을 너무 어렵게 했단 말이지..
잠시 쉬어가자면,, z-index 순서가 젤 최상인게 iframe과 select 란다..
IE6에선 z-index:1; 죽어라 넣어도 순서 다 제끼고 맨위로 온다는 얘기..
그래서 아이프레임으로 가려주는것임~
자.이제 해결방법 들어가시겠다..
//기존 탑메뉴 소스는 div로 되지 않았다고 해서 다른방법을 쓰는건 아니다.
부모에 absolute를 주든 relative를 주든. iframe 을 absolute로 select 가려질 위치를 잡는다.
단 주의 할점은..위에 띄어져 있는곳에다가 iframe을 주는줘야 된다.
나같이 바보같이 바깥에다가 주는사람 없겠지..ㅡㅡ;;
<div id="lnb"> <a name="golnb" id="golnb"></a>
<ul>
<li id="top-menu1" ><a href="#" id="top-menu-head1"><img src="/images/main/lnb1_1.gif" alt="날씨정보" /></a>
<ul id="top-sub-menu1">
<li id="top-1-1"><a href="../intro/intro.jsp" class="on">특보</a></li>
<li id="top-1-2" ><a href="../intro/business.jsp">예보</a></li>
<li id="top-1-3"><a href="../intro/history.jsp">현재날씨</a></li>
<li id="top-1-4"><a href="../intro/composition.jsp">지난날씨</a></li>
<li id="top-1-5"><a href="../intro/map.jsp">일기도·영상</a></li>
<li id="top-1-6"><a href="../intro/map.jsp">생활·산업기상</a></li>
<li id="top-1-7"><a href="../intro/map.jsp">세계날씨·항공</a></li>
<li id="top-1-8"><a href="../intro/map.jsp">지진센터</a></li>
<li id="top-1-9"><a href="../intro/map.jsp">황사센터</a></li>
<li><iframe class="not2" title="내용 없는 프레임"></iframe><li>
//요기다 아이프레임을 줘야 하는데
</ul>
//요기다 죽어라 주니 select 박스가 가려지기만 하지..빠가..
</li>
<li id="top-menu2"><a href="../seoul_enu/work.jsp" id="top-menu-head2"><img src="/images/main/lnb2_1.gif" alt="열린행정" /></a></li>
<li id="top-menu3"><a href="../child_info/edu_for_child.jsp" id="top-menu-head3"><img src="/images/main/lnb3_1.gif" alt="기상배움터" /></a></li>
<li id="top-menu4"><a href="../school_info/find_school.jsp" id="top-menu-head4"><img src="/images/main/lnb4_1.gif" alt="국민광장" /></a></li>
<li id="top-menu5"><a href="../school_info/find_school.jsp" id="top-menu-head5"><img src="/images/main/lnb5_1.gif" alt="전자민원" /></a></li>
<li id="top-menu6"><a href="../school_info/find_school.jsp" id="top-menu-head6"><img src="/images/main/lnb6_1.gif" alt="동네예보" /></a></li>
</ul>
<script type="text/javascript">initTopmenuByMenuId(1,1,0,0,"");</script><noscript></noscript>
//CSS
#header #lnb_area #lnb{ clear:both; position:relative; width:828px; height:25px; padding:8px 0 0 0;}
#header #lnb_area #lnb ul{position:absolute;}
//바로 부모에다가 position값을 줘야 된다. 안그럼 안된다는 보장도 없으나..나같이 헤매지 않으려면,,
iframe.not2 {
border:0px solid red;
position:absolute; /*레이어의 빵꾸난 부분을 때울 iframe의 위치를 조절하기위해 필요 */
top:-10px;
right:230px;
z-index:-99; /*음수값을 줘서 기존 레이어팝업보다 뒤에 위치 하도록 한다 */
width:130px;
height:50px;
filter: alpha(opacity=0); /*익스에서 생기는 테두리를 없애주기위해 필요하다 */ }
<ul>
<li id="top-menu1" ><a href="#" id="top-menu-head1"><img src="/images/main/lnb1_1.gif" alt="날씨정보" /></a>
<ul id="top-sub-menu1">
<li id="top-1-1"><a href="../intro/intro.jsp" class="on">특보</a></li>
<li id="top-1-2" ><a href="../intro/business.jsp">예보</a></li>
<li id="top-1-3"><a href="../intro/history.jsp">현재날씨</a></li>
<li id="top-1-4"><a href="../intro/composition.jsp">지난날씨</a></li>
<li id="top-1-5"><a href="../intro/map.jsp">일기도·영상</a></li>
<li id="top-1-6"><a href="../intro/map.jsp">생활·산업기상</a></li>
<li id="top-1-7"><a href="../intro/map.jsp">세계날씨·항공</a></li>
<li id="top-1-8"><a href="../intro/map.jsp">지진센터</a></li>
<li id="top-1-9"><a href="../intro/map.jsp">황사센터</a></li>
<li><iframe class="not2" title="내용 없는 프레임"></iframe><li>
//요기다 아이프레임을 줘야 하는데
</ul>
//요기다 죽어라 주니 select 박스가 가려지기만 하지..빠가..
</li>
<li id="top-menu2"><a href="../seoul_enu/work.jsp" id="top-menu-head2"><img src="/images/main/lnb2_1.gif" alt="열린행정" /></a></li>
<li id="top-menu3"><a href="../child_info/edu_for_child.jsp" id="top-menu-head3"><img src="/images/main/lnb3_1.gif" alt="기상배움터" /></a></li>
<li id="top-menu4"><a href="../school_info/find_school.jsp" id="top-menu-head4"><img src="/images/main/lnb4_1.gif" alt="국민광장" /></a></li>
<li id="top-menu5"><a href="../school_info/find_school.jsp" id="top-menu-head5"><img src="/images/main/lnb5_1.gif" alt="전자민원" /></a></li>
<li id="top-menu6"><a href="../school_info/find_school.jsp" id="top-menu-head6"><img src="/images/main/lnb6_1.gif" alt="동네예보" /></a></li>
</ul>
<script type="text/javascript">initTopmenuByMenuId(1,1,0,0,"");</script><noscript></noscript>
//CSS
#header #lnb_area #lnb{ clear:both; position:relative; width:828px; height:25px; padding:8px 0 0 0;}
#header #lnb_area #lnb ul{position:absolute;}
//바로 부모에다가 position값을 줘야 된다. 안그럼 안된다는 보장도 없으나..나같이 헤매지 않으려면,,
iframe.not2 {
border:0px solid red;
position:absolute; /*레이어의 빵꾸난 부분을 때울 iframe의 위치를 조절하기위해 필요 */
top:-10px;
right:230px;
z-index:-99; /*음수값을 줘서 기존 레이어팝업보다 뒤에 위치 하도록 한다 */
width:130px;
height:50px;
filter: alpha(opacity=0); /*익스에서 생기는 테두리를 없애주기위해 필요하다 */ }
관련링크
댓글목록
등록된 댓글이 없습니다.