最近做了一个项目,涉及到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背景透明的更多相关文章

  1. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

  2. 解决IE6/IE7/IE8不支持before,after问题

    对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...

  3. [IE兼容性] Table 之边框 (IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效)

    在 IE6 IE7 IE8(Q) 中,在通过 border-collapse:collapse 使用表格的重合边框模型后,其 cellspacing 属性仍然有效: 在 其他浏览器 中,此时的 cel ...

  4. 针对firefox ie6 ie7 ie8的css样式中的line-height属性

    针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

  5. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  6. 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...

  7. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...

  8. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题   百度源代码如下 复制代码 代码如下: <!Do ...

  9. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

随机推荐

  1. LinkedList,HashSet,HashMap

    LinkedList底层源码是采用双向链表实现的 private static class Node<E> { E item;//节点值 Node<E> next;//节点后指 ...

  2. Dubbo学习(九) Dubbo面试问题

    Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合). 从服务模型的角度来看,Dubbo采用的是一种非常简单的 ...

  3. python selenium2 定位一组元素find_elements实例

    打开hao123首页,需要定位以上区域中的所有链接,他们有相同的父元素<ul class="js_bd site-bd site-hd0">,所有链接处在li>a ...

  4. 【bzoj2002】 Hnoi2010—Bounce 弹飞绵羊

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 (题目链接) 题意 数轴上${n}$个点,每个点有一个权值${a_i}$,如果到达这个点,接下 ...

  5. IDEA的强大

    由于朋友推荐,转战IDEA数日,发现一个字就是,牛,完爆任何开发工具,让你代码上瘾的工具. 它集合了所有的开发所需要的东西,且智能化方便,适合开发有一定经验的人去使用,你会爱上它. 下面是快捷键的使用 ...

  6. RRDtool绘制lvs连接数图形

    需求:用RRDtool绘制lvs的连接数图形 RRDtool是一个强大的绘图工具,作者是Tobias Oetiker. RRD全称Round Robin Database,轮转数据库,也是一个时间序列 ...

  7. 主角场景Shader效果:遮挡透明

    基本原理:被遮挡的部分关闭深度写入, 显示透明效果:未被遮挡的部分不关闭深度测试,显示正常贴图效果,即使用两个Pass即可. Pass1:关闭深度写入(ZWrite Off),深度测试渲染较远的物体, ...

  8. bzoj 2809

    2809: [Apio2012]dispatching Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 4519  Solved: 2329[Submi ...

  9. Docker入门与应用系列(四)网络管理

    一.Docker的五种网络模式 在使用docker run创建docker容器时,可以用--net选项指定容器的网络模式,Docker有以下5种网络模式: 1. bridge模式 使用docker r ...

  10. Linux应用程序设计之网络基础编程

    1.TCP/IP协议概述 1.1.OSI参考模型及TCP/IP参考模型 OSI协议参考模型是基于国际标准化组织(ISO)的建议发展起来的,从上到下工分为7层:应用层,表示层,会话层,传输层,网络层,数 ...