如何在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兼容表: ...
随机推荐
- delphi手动创建dataset并插入值
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...
- Hadoop2.6 安装布置问题总结(单机、分布式)
在debian7虚拟机上安装hadoop2.6,期间遇到一些问题在此记录一下. 安装参考: Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04 Hadoop集群安 ...
- P3320 [SDOI2015]寻宝游戏 解题报告
P3320 [SDOI2015]寻宝游戏 题目描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有\(N\)个村庄和\(N-1\)条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以 ...
- java的序列化流和打印流
对象操作流(序列化流) 每次读取和写出的都是JavaBean对象. 序列化:将对象写入到文件中的过程 反序列化:从文件中读取对象到程序的过程 transient: 标识瞬态,序列化的时候,该修饰符修饰 ...
- Gradle 命令之 --stacktrace , --info , --debug 用法
FAQ: Android studio 出现错误Run with --stacktrace option to get the stack trace. Run with --info or --de ...
- c++ 顶层const与底层const
底层const是代表对象本身是一个常量(不可改变): 顶层const是代表指针的值是一个常量,而指针的值(即对象的地址)的内容可以改变(指向的不可改变): #include <iost ...
- mysql 5.7 json 字段类型查找、修改
修改 json 里的数组字段 mysql> set @json = '{"test": [{"name": "laravel"}, { ...
- linux tmux命令小结
http://note.youdao.com/noteshare?id=f1be507b4be27e53684b46a1424746b5
- Mac 上配置 PhpMyAdmin
一.配置自带的 apache 服务器环境 由于 PHP apache 环境在 Mac OS上是自带的,所以不需要另处下安装包,只需要简单配置一下即可.首先打开终端输入命令: sudo vim /etc ...
- webpack的基础入门
webpack的基础入门 这里对于 webpack 的基础入门进行一些总结,可以参考 github 上的 webpack-demo ,链接是 https://github.com/RealAndMe/ ...