分類  >  Web前端 >

SELECT 元素在IE6中遮擋DIV的解決辦法

tags:    時間:2013-12-10 22:07:44
SELECT 元素在IE6中遮擋DIV的解決方法

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

在最近的一個項目中,遇到了IE6 select遮擋div的bug,為了解決這個bug我查了很多資料,試圖找到一個最最有效的方法,很多人是通過iframe的方法來解決,其實我查了國外的很多資料也是通過iframe的方法來解決的。今天我說說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="1">china</option>                      <option value="2">japanese</option>                      <option value="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

推薦閱讀文章

Bookmark the permalink ,來源:互聯網