注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

IE6 IE7(Q) IE8(Q) 中 IFRAME 元素 'background-color' 特性默认值不是 transparent  

2011-06-09 10:09:06|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://www.caodong.net/Article/936.html

问题描述

IE6 IE7(Q) IE8(Q)中 BODY 元素的背景色不是 CSS 2.1 规范规定的 transparent,而是 #FFFFFF。

造成的影响

各浏览器 IFRAME 中的 BODY 元素的背景色不一致。

受影响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

在 Firefox Chrome Safari Opera 中,IFRAME 元素与其他元素一样,其 'background-color' 默认为 'transparent',而在 IE 中, 通过 currentStyle 对象查看测得默认情况下 IFRAME 元素的背景色为 '#FFFFFF',即可白色。所以默认情况下, 当我们为一个 IFRAME 元素设置背景色或者 IFRAME 元素将其祖先元素的背景色透过时,在非 IE 浏览器中 IFRAME 所引入的页面的 BODY 元素也“透出”这个颜色, 而 IE 中 BODY 元素依然为其默认的白色。

IE 中 IFRAME 元素有一个专有的 'allowtransparency' 属性,参见:http://msdn.microsoft.com/zh-cn/library/ms533072(en-us,VS.85).aspx。当其值为 'true' 时,IFRAME 元素可以透明。

下面通过一个例子观察 'allowtransparency' 属性对 IE 中的 IFRAME 元素的影响:

<iframe id="i1" src="http://frieboy168.blog.163.com/blog/2.htm"></iframe> <iframe id="i2" src="http://frieboy168.blog.163.com/blog/2.htm" style="background:red;"></iframe> <iframe id="i3" src="http://frieboy168.blog.163.com/blog/2.htm" allowtransparency="true"></iframe> <iframe id="i4" src="http://frieboy168.blog.163.com/blog/2.htm" style="background:red;" allowtransparency="true"></iframe> 

在IE中效果如下:

document.getElementById("i1").currentStyle.backgroundColor #FFFFFF
document.getElementById("i2").currentStyle.backgroundColor #FFFFFF
document.getElementById("i3").currentStyle.backgroundColor transparent
document.getElementById("i4").currentStyle.backgroundColor red
  • 当没有 'allowtransparency' 属性或者 'allowtransparency' 属性值不为 'true' 时,IFRAME 元素的背景色始终为 '#FFFFFF',并且设置其背景色也无效。
  • 当 'allowtransparency' 属性为 'true' 后,IFRAME 元素的背景色随即变为 'transparent',然后我们可以随意设置其背景色。

下面看看加入 'allowtransparency=true'代码:

<html> <head> </head> <body style="background:gold;">     <iframe allowtransparency="true" src="http://frieboy168.blog.163.com/blog/blank.html" frameborder="1" width="100" scrolling="no" height="26"></iframe> </body> </html>  blank.html: <html> <head> </head> <body style="margin:4px;"> BLANK.HTM </body> </html> 

在各浏览器中效果如下:

IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

IE7(S) IE8(S)已经达到了 IFRAME 全透明化,而 IE6 IE7(Q) IE8(Q) 看上去依然不是透明的。

IE6 IE7(Q) IE8(Q) 中 BODY 元素的背景色不是 CSS 规定的 transparent,而是 #FFFFFF。这个 #FFFFFF 是由 'background-color:window' 得来,'window' 值是 Windows 系统主题设定的“窗口背景色”,这个设置会影响很多程序的窗口背景色,而其他浏览器多不受此影响。 

所以虽然 IFRAME 元素已经透明,但其引入的子页面中的 BODY 元素的背景色不是透明,这样让人无法将 IFRAME 的背景色“透到”子页面的 BODY 元素之上。从而使得 IFRAME 元素在设置了 allowtransparency="true" 后看上去依然不是透明。

更多内容,参见微软公司官方文档:Using IFRAME Elements。

解决方案

IFRAME 透明是一个常见的问题,有时候我们需要其透明,这时需要为 IFRAME 元素添加属性 allowtransparency="true", 同时保证引入子页面的 BODY 元素的背景色是透明的,当被引入的页面不是我们能控制的时,可以通过 IFRAME.contentWindow.documnet.body.backgroundColor="transparent" 来使其透明。 若不需要 IFRAME 的透明背景,为使非 IE 浏览器中呈现 IE 中的默认白色背景,可以直接为 IFRAME 设置白色背景色。

转载请注明来自: http://www.caodong.net/Article/936.html
  评论这张
 
阅读(1546)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017