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

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

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

XML/HTML代码
  1. function?correctPNG() ??
  2. { ??
  3. ???for(var?i=0;?i<document.images.length;?i++) ??
  4. ???{ ??
  5. ???var?img?=?document.images[i] ??
  6. ???var?imgimgName?=?img.src.toUpperCase() ??
  7. ???if?(imgName.substring(imgName.length-3,?imgName.length)?==?”PNG”) ??
  8. ???{ ??
  9. ???var?imgID?=?(img.id)???”id=‘”?+?img.id?+?”‘?”?:?”” ??
  10. ???var?imgClass?=?(img.className)???”class=‘”?+?img.className?+?”‘?”?:?”” ??
  11. ???var?imgTitle?=?(img.title)???”title=‘”?+?img.title?+?”‘?”?:?”title=‘”?+?img.alt?+?”‘?” ??
  12. ???var?imgStyle?=?“display:inline-block;”?+?img.style.cssText ??
  13. ???if?(img.align?==?”left”)?imgStyle?=?“float:left;”?+?imgStyle ??
  14. ???if?(img.align?==?”right”)?imgStyle?=?“float:right;”?+?imgStyle ??
  15. ???if?(img.parentElement.href)?imgStyle?=?“cursor:hand;”?+?imgStyle? ??
  16. ???var?strNewHTML?=?“<span?”?+?imgID?+?imgClass?+?imgTitle ??
  17. ???+?”?style=\””?+?”width:”?+?img.width?+?”px;?height:”?+?img.height?+?”px;”?+?imgStyle?+?”;” ??
  18. ???+?”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader” ??
  19. ???+?”(src=\'”?+?img.src?+?”\’,?sizingMethod=‘scale’);\”></span>” ??
  20. ???img.outerHTML?=?strNewHTML??
  21. ???ii?=?i-1 ??
  22. ???}; ??
  23. ???}; ??
  24. }; ??
  25. ??
  26. if(navigator.userAgent.indexOf(“MSIE”)>-1) ??
  27. { ??
  28. window.attachEvent(“onload”,?correctPNG); ??
  29. }; ??
  30. ??

或者使用下面这段代码:

?

JavaScript代码
  1. function?correctPNG()?//?correctly?handle?PNG?transparency?in?Win?IE?5.5?&?6. ??
  2. { ??
  3. ????var?arVersion?=?navigator.appVersion.split(“MSIE”) ??
  4. ????var?version?=?parseFloat(arVersion[1]) ??
  5. ????if?((version?>=?5.5)?&&?(document.body.filters))? ??
  6. ????{ ??
  7. ???????for(var?j=0;?j<document.images.length;?j++) ??
  8. ???????{ ??
  9. ??????????var?img?=?document.images[j] ??
  10. ??????????var?imgName?=?img.src.toUpperCase() ??
  11. ??????????if?(imgName.substring(imgName.length-3,?imgName.length)?==?“PNG”) ??
  12. ??????????{ ??
  13. ?????????????var?imgID?=?(img.id)???“id='”?+?img.id?+?“‘?”?:?“”??
  14. ?????????????var?imgClass?=?(img.className)???“class='”?+?img.className?+?“‘?”?:?“”??
  15. ?????????????var?imgTitle?=?(img.title)???“title='”?+?img.title?+?“‘?”?:?“title='”?+?img.alt?+?“‘?”??
  16. ?????????????var?imgStyle?=?“display:inline-block;”?+?img.style.cssText? ??
  17. ?????????????if?(img.align?==?“left”)?imgStyle?=?“float:left;”?+?imgStyle ??
  18. ?????????????if?(img.align?==?“right”)?imgStyle?=?“float:right;”?+?imgStyle ??
  19. ?????????????if?(img.parentElement.href)?imgStyle?=?“cursor:hand;”?+?imgStyle ??
  20. ?????????????var?strNewHTML?=?“<span?”?+?imgID?+?imgClass?+?imgTitle ??
  21. ?????????????+?“?style=\””?+?“width:”?+?img.width?+?“px;?height:”?+?img.height?+?“px;”?+?imgStyle?+?“;”??
  22. ?????????????+?“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”??
  23. ?????????????+?“(src=\'”?+?img.src?+?“\’,?sizingMethod=’scale’);\”></span>”? ??
  24. ?????????????img.outerHTML?=?strNewHTML ??
  25. ?????????????j?=?j-1 ??
  26. ??????????} ??
  27. ???????} ??
  28. ????}???? ??
  29. } ??
  30. window.attachEvent(“onload”,?correctPNG);??

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

?在网页头部调用

?

XML/HTML代码
  1. <script?language=“JavaScript”?src=“correctpng.js”?type=“text/javascript”></script>??

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6 BUG 大全】让IE6支持Alpha透明的PNG的插入

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏