IE6 select z-index無效,遮擋div bug的解決方法

今天我說說iframe解決的一般方法,已經使用jQuery插件bgiframe解決IE6 select z-index無效,遮擋div的bug 。

解決方法之一:Iframe包裹select元素
使用iframe包住select,這樣iframe有z-index , 只要在div上設置的z-index比iframe的高即可~這種方法有一定的局限性,不可能每個select都要加個iframe吧?所以不推薦!代碼如下:

復制代碼代碼如下:
iframe style="z-index:1" style="z-index:1"!-- 用iframe 解決此bug --
select name="country"
option value="https://www.questions.com.cn/dnjc/1"china/option
option value="https://www.questions.com.cn/dnjc/2"japanese/option
option value="https://www.questions.com.cn/dnjc/1"U.S.A/option
/select
/iframe

解決方法之二:以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

解決方法之三:使用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

相關經驗推薦