首頁 > web前端 > html教學 > 解決div被iframe遮住的多種情況

解決div被iframe遮住的多種情況

Y2J
發布: 2017-05-23 09:29:37
原創
4710 人瀏覽過

這篇文章為大家介紹了p被iframe遮住的一些狀況,以及被遮住後的解決辦法,有需要的朋友們可以參考借鏡。

類似結構:

程式碼如下:

<p></p><ifram src="<a href="http://caibaojian.com"></iframe">http://caibaojian.com"></iframe</a>
登入後複製

第一種:透明背景被遮住

當p使用透明的背景時,無論是使用(opacity或rgba格式),除了chrome,其它瀏覽器都出現p被iframe遮住的情況。

解決方法:

p使用不透明背景或使用透明的背景圖片。

第二種:ie8中z-index失效

#在ie中,iframe裡引入video影片播放會導致p的z-index無效,即p的z-index無論設為多少,均被iframe遮住。來源

解決方法:

給iframe位址加上一個參數wmode=opaque,假如位址是:http://caibaojian.com 則對應改為:http://caibaojian.com? wmode=opaque。

flash在其他元素後面

另外順便看到flash也有這個z-index失效的問題,同樣是給flash加一個上面的參數

<param name="wmode" value="transparent">
登入後複製

程式碼如下:

<EMBED src="<a href="https://cdn.css-tricks.com/FlashAnimation.swf">https://cdn.css-tricks.com/FlashAnimation.swf</a>" type="application/x-shockwave-flash" wMode="Transparent">
登入後複製
#附錄iframe的一些參數

border

程式碼如下:

<iframe border="3"></iframe>
登入後複製

設定圍繞圖文框的邊緣寬度

frameboder

程式碼如下:

<iframe frameboder="0"></iframe>
登入後複製

設定邊框是不否為3維(0=否,1=是)#height,width

程式碼如下:

<iframe height="31" width="88"></iframe>
登入後複製

設質邊框的寬度與高度

#scrolling

程式碼如下:

<iframe scrolling="no"></iframe>
登入後複製

是否有捲軸(yes,no,auto)

src

#程式碼如下:

<iframe src="girl.gif"></iframe>
登入後複製

指定iframe呼叫的檔案或圖片(html,htm,gif,jpeg,jpg,png,txt,*.*)
總結

##【相關推薦】

#1. # Html免費影片教學

2. 教你如何在html中插入連結

3. 教你怎麼在nodejs下解析html

4. 分享一個超全面的HTML、CSS知識點總結

5. Html5 datalist標籤詳解以及與後台資料的動態匹配

###

以上是解決div被iframe遮住的多種情況的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板