PNG图片为背景:

方法一:将png图片,输出一张gif图片,用css hack的方法,CSS定义如下:

.ie6pngimg { background:url(img.png); _background:url(img.gif);}

方法二:使用Microsoft专有滤镜,CSS定义如下:

#ie6pngimg{width:100%;background-image:url(img.png);_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src="img.png");}

PNG图片为使用img标签插入在网页内容中

方法一:使用JS,将img标签用<span>标签替换掉,并且通过滤镜设置该<span>标签的background。它会处理所有插入的PNG图片。

<!--[if IE 6]>
<script>
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);
</script>
<![endif]-->

方法二:原理同上,只是将以上JS代码另存为JS文件ie6png.js,再在网页中调用此JS文件:

<!--[if IE 6]>
<script src="ie6png.js" language="javascript" type="text/javascript"></script>
<![endif]-->

让“块”透明的方法

.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;} 

测试IE6,IE7,IE8,FF2,FF3均通过。但IE6,IE7需定义宽度(100%也行)才能看到效果。

© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.