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

author author     2022-08-22     147

关键词:

最近做了一个项目,涉及到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代码:

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

 

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

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

目标ie6,ie7,ie8

...s,ofcourse*/color:green9;/*IE8andbelow*/*color:yellow;/*IE7andbelow*/ IE6 bodycolor:red;/*allbrowsers,ofcourse*/color:green9;/*IE8andbelow*/*color:yellow;/*IE7andbelow*/_color:orange;/*IE6*/ 查看详情

css目标ie6,ie7,ie8(代码片段)

查看详情

如何让iframe中页面全屏显示

参考技术A经典代码iFrame自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。HTML代码:Javascript代码:functioniFrameHeight()varifm=document.getElementById("iframepage");varsubWeb=document.frames?document.frame...本回答被提问者采纳 查看详情

js代码判断ie6,ie7,ie8,ie9!

JS代码判断IE6,IE7,IE8,IE9!2011年12月15日星期四14:01做网页有时候会用到JS检测IE的版本,下面是检测MicrosoftInternetExplorer版本的三种代码!有一种代码:<scripttype="text/javascript">varbrowser=navigator.appNamevarb_version=navigator.appVersio 查看详情

常见的兼容性问题解决方案

1.区别IE和非IE浏览器#demo1{background:blue;/*非IE背景藍色*/background:red9;/*IE6、IE7、IE8背景紅色*/}2.区别IE6,IE7,IE8,FF【区别符号】:「9」、「*」、「_」【示例】:#demo2{background:blue;/*Firefox背景变蓝色*/background:red9;/*IE8背景变红色*/*backg 查看详情

如何使用背景减法在 OpenCV 中实现tripwire

】如何使用背景减法在OpenCV中实现tripwire【英文标题】:howtoimplementtripwireinOpenCVusingbackgroundsubtraction【发布时间】:2015-12-1107:59:42【问题描述】:以下paper为您提供有关tripwire的想法。我已经使用OpenCVC++的backgroundsubtractormog2方法从... 查看详情

解决header,footer等html5标签在ie(ie6/ie7/ie8)无效的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。HTML5的新标签元素有:<header>定义页面或区段的头部;<footer>定义页面或区段... 查看详情

如何在 react-native 中实现具有透明背景的视频

】如何在react-native中实现具有透明背景的视频【英文标题】:Howtoimplementvideowithtransparentbackgroundinreact-native【发布时间】:2018-05-1610:29:24【问题描述】:如何在React-native中实现具有透明背景的视频播放器?视频以扩展名.mov保存(... 查看详情

css完美兼容ie6/ie7/ie8/ie9/ie10的通用方法

...如果有人理解的话,请告诉我一声,谢了!:)3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题4、关于 查看详情

浏览器的差距ie6ie7ie8符号htmlcssbfc

...默认的字体是16px,谷歌的最小字体是12px,其他是10px2、ie6、ie7、ie8、  hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到一致的渲染效果  html的hack:写在html的标签中  css的hack:写在css的样式... 查看详情

ie6/ie7/ie8兼容h5标签

可以使用html5shiv(html5shiv主要解决HTML5提出的新元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式)来解决<!--[ifltIE9]><scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-- 查看详情

让ie6ie7ie8ie9ie10ie11支持bootstrap的解决方法转

...b网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在雅朋网的一个网友帖子... 查看详情

一行代码解决各种ie兼容问题,ie6,ie7,ie8,ie9,ie10

...问题,IE6,IE7,IE8,IE9,IE102012-04-2516:29:04|分类:学习|字号订阅在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下<!Doctype... 查看详情

兼容问题

...1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>2. 2.flaot浮动造成IE6下面双倍边距问题,这个最... 查看详情

javascript关闭ie6,ie7,ie8和firefox没有确认框?

...击它时,将关闭浏览器而不显示任何确认对话框。它需要在InternetExplorer6,7,8和Firefox中工作。答案我做了一些研究,发现如果没有通过javascript打开窗口/标签,或者如果标签页的历史页>1,则无法关闭Firefox中的窗口/标签(即,... 查看详情

让ie6ie7ie8ie9ie10ie11支持bootstrap的解决方法

...b网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在雅朋网的一个网友帖子... 查看详情

怎么用csshack处理各浏览器兼容ie6,ie7,ie8,ie9/ff

...容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于... 查看详情

ie6ie7ie8及其他浏览器多个元素并排显示

IE6、IE7、IE8及其他浏览器多个元素并排显示HTML代码<divclass="line"><h1>全部input框</h1><inputplaceholder="我是输入框..."type="text"><inputplaceholder="我是输入框..."type="text"><inputtype="text"place 查看详情