解决ie6/7/8iframe背景透明的问题

简介:

根据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{ transparent;}< /p>


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

给它来一段js代码:

1
2
3
4
5
6
window.onload =  function (){
     var  ifra=document.getElementsByTagName( 'IFRAME' );
     for ( var  i=0,l=ifra.length;i<l;i++) {
         ifra[i].setAttribute( 'allowTransparency' , 'true' );
     }
}



至此,以为问题解决。可突然发现还是白色的背景,WHY?那是如前面说的IE6/IE7/IE8中 BODY 元素的背景色不是 transparent的,所以

对iframe里的body也要设置透明化:transparent;


在iframe中设置属性为
<iframe src="left.htm" scrolling="no" allowtransparency=true width="209" height="900" frameborder="0"></iframe>

在left.htm设置<body style="background-color:transparent">

如果不进行设置,则默认的背景色是白色.



      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1226872,如需转载请自行联系原作者


相关文章
|
Web App开发 JavaScript 前端开发
|
Web App开发
解决IE浏览器中Iframe跨域访问不能读写cookie问题
摘要: 本文讲的是解决IE浏览器中Iframe跨域访问不能读写cookie问题, 假设A嵌套了B 解决方法:第一种很简单:将系统B设置为可信站点。
1480 0
|
Web App开发 iOS开发 JavaScript
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
在页面上用了iframe带来方便的同时也带来了麻烦,在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。 为了解决IE,Firefox,chrome,safari中iframe显示高度自适应问题上网海找了一遍,试了好几个方案都不妥,最后发现了一个可以正常解决的方案。
1097 0
|
Web App开发 .NET 测试技术
IE里Iframe的Cookie问题解决办法总结
最近在做一个项目需要用到IFRAME,发现IE在对iframe里面的页面写Cookie的时候有一些安全限制,导致写入和读取Cookie不成功,找了好长时间的解决办法,重要找到如下的办法:   1.
1090 0
|
Web App开发 JavaScript 前端开发
iframe框架取值兼容ie/firefox/chrome的写法
为啥世上会有这么多不同的浏览器?每次遇到js/css的浏览器兼容性问题,总是要发出这样的感叹,真希望这些个浏览器公司全部倒下,然后只留下一家(显然这是一个不可能实现的美好愿望),言归正传,看代码吧: iframe框架内页:     框架内页                 父级类:...
765 0
|
JavaScript 前端开发
iframe高度自适应的IE解决方案
主页面main.html  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
1007 0
|
Web App开发 前端开发 JavaScript
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常