【IE6 BUG 大全】让IE6支持Alpha透明的PNG的插入-WEB前端开发

IE6浏览器支持100%透明的PNG格式的图片，但是Alpha透明的PNG很是让人头痛。网上有很多的修正方法，有滤镜+hack的方法，有JS的方法。

注意：这个方法只支持<img src=”…” alt=”” />的图片插入方式，不支持背景图片！
这里给大家介绍一种网上比较流行使用较多的一种JS方法：

XML/HTML代码

function?correctPNG() ??
{ ??
???for(var?i=0;?i<document.images.length;?i++) ??
???{ ??
???var?img?=?document.images[i] ??
???var?imgimgName?=?img.src.toUpperCase() ??
???if?(imgName.substring(imgName.length-3,?imgName.length)?==?”PNG”) ??
???{ ??
???var?imgID?=?(img.id)???”id=‘”?+?img.id?+?”‘?”?:?”” ??
???var?imgClass?=?(img.className)???”class=‘”?+?img.className?+?”‘?”?:?”” ??
???var?imgTitle?=?(img.title)???”title=‘”?+?img.title?+?”‘?”?:?”title=‘”?+?img.alt?+?”‘?” ??
???var?imgStyle?=?“display:inline-block;”?+?img.style.cssText ??
???if?(img.align?==?”left”)?imgStyle?=?“float:left;”?+?imgStyle ??
???if?(img.align?==?”right”)?imgStyle?=?“float:right;”?+?imgStyle ??
???if?(img.parentElement.href)?imgStyle?=?“cursor:hand;”?+?imgStyle? ??
???var?strNewHTML?=?“<span?”?+?imgID?+?imgClass?+?imgTitle ??
???+?”?style=\””?+?”width:”?+?img.width?+?”px;?height:”?+?img.height?+?”px;”?+?imgStyle?+?”;” ??
???+?”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader” ??
???+?”(src=\'”?+?img.src?+?”\’,?sizingMethod=‘scale’);\”></span>” ??
???img.outerHTML?=?strNewHTML??
???ii?=?i-1 ??
???}; ??
???}; ??
}; ??
??
if(navigator.userAgent.indexOf(“MSIE”)>-1) ??
{ ??
window.attachEvent(“onload”,?correctPNG); ??
}; ??
??

或者使用下面这段代码：

JavaScript代码

function?correctPNG()?//?correctly?handle?PNG?transparency?in?Win?IE?5.5?&?6. ??
{ ??
????var?arVersion?=?navigator.appVersion.split(“MSIE”) ??
????var?version?=?parseFloat(arVersion[1]) ??
????if?((version?>=?5.5)?&&?(document.body.filters))? ??
????{ ??
???????for(var?j=0;?j<document.images.length;?j++) ??
???????{ ??
??????????var?img?=?document.images[j] ??
??????????var?imgName?=?img.src.toUpperCase() ??
??????????if?(imgName.substring(imgName.length-3,?imgName.length)?==?“PNG”) ??
??????????{ ??
?????????????var?imgID?=?(img.id)???“id='”?+?img.id?+?“‘?”?:?“”??
?????????????var?imgClass?=?(img.className)???“class='”?+?img.className?+?“‘?”?:?“”??
?????????????var?imgTitle?=?(img.title)???“title='”?+?img.title?+?“‘?”?:?“title='”?+?img.alt?+?“‘?”??
?????????????var?imgStyle?=?“display:inline-block;”?+?img.style.cssText? ??
?????????????if?(img.align?==?“left”)?imgStyle?=?“float:left;”?+?imgStyle ??
?????????????if?(img.align?==?“right”)?imgStyle?=?“float:right;”?+?imgStyle ??
?????????????if?(img.parentElement.href)?imgStyle?=?“cursor:hand;”?+?imgStyle ??
?????????????var?strNewHTML?=?“<span?”?+?imgID?+?imgClass?+?imgTitle ??
?????????????+?“?style=\””?+?“width:”?+?img.width?+?“px;?height:”?+?img.height?+?“px;”?+?imgStyle?+?“;”??
?????????????+?“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”??
?????????????+?“(src=\'”?+?img.src?+?“\’,?sizingMethod=’scale’);\”></span>”? ??
?????????????img.outerHTML?=?strNewHTML ??
?????????????j?=?j-1 ??
??????????} ??
???????} ??
????}???? ??
} ??
window.attachEvent(“onload”,?correctPNG);??

把以下代码保存为correctpng.js?

?在网页头部调用

XML/HTML代码

<script?language=“JavaScript”?src=“correctpng.js”?type=“text/javascript”></script>??

这样在页面中<img src=”…” alt=”” />的图片插入方式就支持Alpha透明的PNG了

WEB前端开发

【IE6 BUG 大全】让IE6支持Alpha透明的PNG的插入

相关推荐

评论抢沙发

置顶推荐

最近文章

热门标签

最新评论

分类目录

热门文章

前端开发相关广告投放更专业更精准

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏