IE6.0及以下版本PNG透明图片不透明解决方案

  1. /*
  2. Correctly handle PNG transparency in Win IE 5.5 & 6.
  3. Copyright 2007 Ignia, LLC
  4. Based in part on code from from http://homepage.ntlworld.com/bobosola.
  5. Edit: Jena.want
  6. Date: 2008.11.30
  7. Web: www.AOBODO.com | www.IsHere.cn
  8.  
  9. Use in  with DEFER keyword wrapped in conditional comments:
  10. <!--[if lt IE 7]>
  11. <mce:script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></mce:script>
  12. <![endif]-->
  13. */
  14.  
  15. (function fixPng() {
  16. var arVersion = navigator.appVersion.split("MSIE")
  17. var version = parseFloat(arVersion[1])
  18.  
  19. if ((version &gt;= 5.5 &amp;&amp; version &lt; 7.0) &amp;&amp; (document.body.filters)) {
  20. for(var i=0; i
  21. var img = document.images[i];
  22. var imgName = img.src.toUpperCase();
  23. if (imgName.indexOf(".PNG") &gt; 0) {
  24. var width = img.width;
  25. var height = img.height;
  26. var sizingMethod = (img.className.toLowerCase().indexOf("scale") &gt;= 0)? "scale" : "image";
  27. img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
  28. img.src = "images/blank.gif";
  29. img.width = width;
  30. img.height = height;
  31. }
  32. }
  33. }
  34. })();

这是打好包的文件，需要的朋友可以下载试试。msiepng

另外，如果PNG图片做背景的话，在IE6下也会出现不透明情况，以上脚本只解决了页面中的PNG图片透明，如果是CSS样式中使用了透明的PNG图片，则可以使用以下方案解决透明问题，利用了只有 IE6 才识别的下划线（_），来定义 IE6 浏览器中的滤镜：

  1. #png {
  2. background: url(绝对路径/images/bg.png) repeat;
  3. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="绝对路径/images/bg.png");
  4. _background:none;
  5. }
Tags: , ,
Posted in javascript at November 30th, 2008. 1 Comment.