天天看點

flash遮擋DIV元素的問題總結

1、DIV被Silverlight遮擋, 加入windowless參數即可。

<object id=”silverlight” data=”data:application/x-silverlight,” type=”application/x-silverlight-2-b2″ width=”100%” height=”100%” >

<param name=”source” value=”ClientBin/YourSilverlight.xap”/>

<param name=”onerror” value=”onSilverlightError” />

<param name=”background” value=”transparent” />

<param name=”windowless” value=”true” />

2、DIV被Flash遮擋,加入<param name="wmode" value="transparent" />

<object width="480" height="400" data="你的flash.swf" 
type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="align" value="middle" />
<param name="src" value="你的flash.swf" />
<param name="quality" value="high" />
</object>

      

解決方法之一: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不會占用流布局空間*/ 

100%; /*100%保證可以覆寫整個div*/ 

height: 100%; 

z-index:-1; /*-1保證iframe顯示在div下方*/ 

.T_div 

position: absolute; 

left:100px; 

top:50px; 

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

3、IE6下,DIV被Select控件遮擋