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

這篇文章為大家介紹了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中文網其他相關文章！