如何在ie6/ie7/ie8中实现iframe背景透明

最近做了一个项目，涉及到ie8iframe背景透明的问题，做了老半天，才把它搞定的，现在把我的经历贴出来和大家分享：

众所周知的根据W3C CSS 2.1 规范规定，''''background-color'''' 特性的默认值为 ''''transparent''''，即透明；但是IE6/IE7/IE8中 BODY 元素的背景色不是 transparent，而是 #FFFFFF;也就是变成了白色的。

其实，有一点我们是要注意的，也是必须知道的，在iframe中这个背景是其本身，不是iframe内的html元素的，所以，只对iframe进行相关设置就能去掉这个背景。（你可以试一下哦）

在iframe有个allowTransparency的属性这个属性就是控制它的透明度的，意思是是否允许透明；但是IE6/IE7/IE8中却是白色;所以我们可以这样加上它 <iframe allowTransparency="true" />，加上这个属性，想要的效果就出来了。但是有时候是会出现一些小的问题的，如果为了追求更好的保障的话，就要加上iframe{background: transparent;}，这样你就可以的了。

但还有一些特殊情况：有时候iframe不是HTML中本身写的，是加载进来的，这时虽然以上的CSS可以生效，但却没法给iframe本身加上allowTransparency属性了，这时候要怎么做？很简单给它来一段js代码：

  window.onload = function(){

     var ifra=document.getElementsByTagName(''''IFRAME'''');

         for(var i=0,l=ifra.length;i<l;i++) {

             ifra[i].setAttribute(''''allowTransparency'''',''''true'''');

         }

  }

至此，你以为问题解决。可突然发现还是白色的背景，这是为什么呢?那是因为iframe中的 BODY 元素的背景色不是 transparent的，所以对iframe里的body也要设置透明化：background:transparent；由此可以看出，你要分清情况的，框架要透明，里面的元素也要透明设置的，请记住这个属性：background:transparent；

以上文章有深圳网络公司易捷网络科技编写，转载时注明出处，谢谢合作。

如何在ie6/ie7/ie8中实现iframe背景透明的更多相关文章

css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程
一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...
解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...
[IE兼容性] Table 之边框（IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效）
在 IE6 IE7 IE8(Q) 中,在通过 border-collapse:collapse 使用表格的重合边框模型后,其 cellspacing 属性仍然有效: 在其他浏览器中,此时的 cel ...
针对firefox ie6 ie7 ie8的css样式中的line-height属性
针对firefox ie6 ie7 ie8的css样式中的line-height属性以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...
ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号订阅在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下复制代码代码如下: <!Do ...
IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

随机推荐

linux 负载均衡配置 keepalive lvs 使用nginx转发 CentOS7 搭建LVS+keepalived负载均衡
最近希望能够配置一下负载均衡,在虚拟机上面,但是网上找了很多资料很零散,对于不了解的人,很多不够详细,最近终于做好了,把具体的步骤写下来,方便各位网友查阅学习这个实验需要安装nginx如果没有安装过 ...
app流畅度测试--使用手机自带功能
1.进入开发者选项,在“监控”选项卡找到“GPU呈现模式分析”的选项 2.开启后,即可以条形图和线形图的方式显示系统的界面相应速度 3.那么要如何根据曲线判断系统是否流畅呢?实际上这个曲线表达的是GP ...
SPOJ IM_Intergalactic Map
判断能否从一个点同时找出两条不相交的路径到另外两个点. 保证路径不相交,那么需要拆点.然后?好像就没什么了,直接最大流即可. 不过,,,不需要求出所有的最大流,只要跑两次EK看看能否增广两次就行了. ...
springmvc+mybatis 处理图片(二)：显示图片
数据库及配置文件等参考:springmvc+mybatis 处理图片(一):上传图片思路:把图片二进制信息写入到HttpServletResponse 的outputStream输出流中来显示图片.一 ...
Window系统安装TFLearn
1. 确保成功安装了tensorflow 2. 查看当前tensorflow下的库文件,判断是否已经安装了h5py,scipy:conda list 3. 若没有安装,安装h5py,scipy.我的电 ...
随机场（Random field）
一.随机场定义 http://zh.wikipedia.org/zh-cn/随机场随机场(Random field)定义如下: 在概率论中, 由样本空间Ω = {0, 1, …, G − 1}n取样 ...
pyCharm最新2019激活码
破解补丁激活优点:到期时间为2099年,基本为永久啦缺点:相对服务器激活麻烦些,但是一共只需要3个步骤,其实并不麻烦一.下载 https://pan.baidu.com/s/1mcQM8CLUnw ...
【CF183D】T-shirt（动态规划，贪心）
[CF183D]T-shirt(动态规划,贪心) 题面洛谷 CodeForces 题解 \(O(n^2m)\)的暴力懒得写了,比较容易,可以自己想想. 做法是这样的,首先我们发现一个结论: 对于某个 ...
洛谷 P1446 [HNOI2008]Cards 解题报告
P1446 [HNOI2008]Cards 题目描述小春现在很清闲,面对书桌上的\(N\)张牌,他决定给每张染色,目前小春只有\(3\)种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun ...
bzoj3203【sdoi2013】保护出题人
题目描述输入格式第一行两个空格隔开的正整数n和d,分别表示关数和相邻僵尸间的距离.接下来n行每行两个空格隔开的正整数,第i + 1行为Ai和 Xi,分别表示相比上一关在僵尸队列排头增加血量为Ai ...

如何在ie6/ie7/ie8中实现iframe背景透明

如何在ie6/ie7/ie8中实现iframe背景透明的更多相关文章

随机推荐

热门专题