잘못된 IE6 select z-index 해결, div 버그 가리기

최근의 한 프로젝트에서 IE6 select가div를 가리는 버그를 만났습니다. 이 버그를 해결하기 위해 저는 많은 자료를 찾았습니다. 가장 효과적인 방법을 찾으려고 했습니다. 많은 사람들이 iframe의 방법을 통해 해결했습니다. 사실 제가 외국의 많은 자료를 찾았는데 이것도 iframe의 방법을 통해 해결했습니다.오늘 나는 iframe가 해결하는 일반적인 방법을 말하는데, 이미 jQuery 플러그인 bgiframe를 사용하여 IE6 select z-index가 무효이고div의 버그를 가렸다.

해결 방법 중 하나: Iframe 패키지 select 요소

iframe를 사용하여 select를 감싸면 iframe에 z-index가 있습니다. div에 설치된 z-index가 iframe보다 높으면 됩니다. 이런 방법은 어느 정도 한계가 있습니다. 모든 select에 iframe를 추가할 수는 없겠죠?그래서 추천 안 해!코드는 다음과 같습니다.

<iframe style="z-index:1;position: absolute; "><!--  iframe    bug -->     
            <select name="country">                    
                 <option value="1">china</option>     
                <option value="2">japanese</option>     
                <option value="1">U.S.A</option>     
             </select>     
</iframe>

해결 방법 2: Iframe을 div의 하위 요소로 하고 select 요소를 덮어쓰기

div와 같은 폭의 iframe를 만들고 z-index가div보다 낮습니다.이 방법은 다음을 권장합니다.

<style>.T_iframe   
{   
    position: absolute;/*      iframe         */   
    width: 100%;    /*100%        div*/   
    height: 100%;   
    z-index:-1; /*-1  iframe   div  */   
}   
.T_div   
{   
    position: absolute;   
    left:100px;   
    top:50px;   
    width: 300px;   
    height: 200px;   
    background : blue;     
    z-index:100;   
}   </style>
<div class="T_div">  
     <span>        dom  </span>  
     <iframe class="T_iframe"></iframe>  
</div>

해결 방법 3: jQuery의 bgiframe 플러그인 사용

만약 프로젝트가 jQuery를 인용한다면, 나는 bgiframe 플러그인을 사용하여 select의 가려진div 문제를 해결하는 것을 추천한다. 원리는 매우 간단하다. 즉, 같은 높이와 같은 폭의 iframe를div에 삽입해서 ~bgiframe 다운로드 주소를 만드는 것이다.http://github.com/brandonaaron/bgiframe, 사용 방법:

$('.fix-z-index').bgiframe();

매개변수 설명:
top: top 위치 설정, 기본 auto left: left 위치 설정, 기본 auto width: iframe 너비 설정, 기본 auto height: iframe 높이 설정, 기본 auto opacity 설정, 투명 여부, 기본값true src: iframe src 설정, 기본값javascript:false
성명: 문장이 오리지널 문장으로 성명되지 않았습니다. 본문 링크http://js8.in/553.html.전재IN ™
다음으로 이동:http://js8.in/553.html