视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
解决div被iframe遮住的多种情况
2020-11-27 15:33:11 责编:小采
文档


这篇文章给大家介绍了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标签详解以及与后台数据的动态匹配

下载本文
显示全文
专题