IE 5.5和6的透明PNG修复程序

Posted 2021-02-27

This is an excellent solution for fixing IE 6's inability to display transparent PNGs correctly.

Step 1: Include the following conditional comment the HEAD area of your document. You will need to update the CSS selector and also the path to whereever you put the .htc file.

<!--[if lte IE 6]>
<style type="text/css">
  img { behavior: url(/css/iepngfix.htc) }
</style>
<![endif]-->

Step 2: Create a transparent GIF that's 1x1 and save it as blank.gif in your images folder.

Step 3. Copy the source below and save it in a file called iepngfix.htc and place it in your CSS folder. Note, you may need to update the images folder to match the folder you're using on your site.

That's it. Once you have everything in place and assuming everything is referenced correclty, PNG transparency will work in IE 6.

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
 
<script type="text/javascript">
 
// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
 
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
 
 
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = '../images/blank.gif';
 
 
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
 
function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}
 
function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5.5|6.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;
 
 var bgImg = currentStyle.backgroundImage || style.backgroundImage;
 
 if (tagName == 'IMG')
 {
  if ((/.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}
 
doFix();
 
</script>
</public:component>