在最近的一個項目中,遇到了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;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>
解決方法之二:以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,使用方法:
參數說明:
top:設定top位置,預設為auto
left:設定left位置,預設為auto
width:設定iframe寬度,預設為auto
height:設定iframe高度,預設為auto
opacity:設定是否透明,預設為true
src:設定iframe的src,預設為javascript:false
聲明:文章未聲明為原創文章,本文連結 http://js8.in/553.html. 轉載請注明轉自 JS8.IN ™
轉自:http://js8.in/553.html