目前最佳ie6下png透明解决方案
关于ie6下png图片的透明问题,市面上有很多的解决方案【我在前面写过2篇相关文章(透明png在ie7显示为黑色背景的解决办法、关于ie6中使用css滤镜后链接无法点击的问题)】,主要有以下2种:
(1)、js修复法:
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
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
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
(2)、css滤镜法:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/**.png");
上面2中方法都有一些缺陷。如链接失效问题,虽说可以用position:relative来修复,但是不一定百分百管用。
今天我主要介绍一种更加完美的解决办法,那就是
DD_belatedPNG。
如何使用:
1、先点击上面的链接去下载DD_belatedPNG.js,里面有一种压缩版本,一种未压缩版本。你下载哪个都行,下哪个在网页引用js的时候就用哪个的文件名。
2、在页面中应用js:
<!--[if IE 6]>
<script src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
<!--[endif]-->
3、ok!