IE6 png背景图片显示不正常处理
现在web设计，画面是越来越炫
但是使用了透明的背景图，在IE6下，
在ie78 ff等浏览器显示正常。
?解决办法：
body{ background-color:#CCC;}一般普通写法如下：div.bg1{ background:url(logo.png) no-repeat center;width:100px; height:100px;}特殊处理写法如下：/** Only Used For IE */*.bg2{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="logo.png"); width:100px; height:100px;}/** Only Used For FF,Sa*/html > body .bg2{ background:url(logo.png) no-repeat center;width:100px; height:100px;}??
一下是html调用css写法:
<body><div name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--.qq {height: 90px;width: 90px;background-image: url(icon_home.png)!important;/* FF IE7 */background-repeat: no-repeat;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */_ background-image: none; /* IE6 */}--></style></head><body><div name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">.mypng img {azimuth: expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);}</style></head><body>换成你的png图片<div width="30" height="30" /><img src="icon_face_10.png" width="30" height="30" /><img src="icon_face_08.png" width="30" height="30" /></div></body></html>?
案例3:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="JavaScript"> 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><style type="text/css"><!--body {background-color: #9999CC;}--></style></head><body>把图片换成你自己的图片<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 --><img src="img/icon_face_05.png" width="30" height="30" /><img src="img/menu_title_over.png" width="130" height="36" /></body></html> ?案例4：
?
<script language="javascript">// 修复 IE 下 PNG 图片不能透明显示的问题function fixPNG(myImage) {var arVersion = navigator.appVersion.split("MSIE");var version = parseFloat(arVersion[1]);if ((version >= 5.5) && (version < 7) && (document.body.filters)){ var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""; var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""; var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "; var imgStyle = "display:inline-block;" + myImage.style.cssText; var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"; myImage.outerHTML = strNewHTML;} } window.onload=function(){ document.getElementById("top").style.height=screen.height/5+"px"; }//</script>?
用法如下：
<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />
?
以下是微软官方提供的解决方法:
/* Correctly handle PNG transparency in Win IE 5.5 & 6.Copyright 2007 Ignia, LLCBased in part on code from from http://homepage.ntlworld.com/bobosola.Use in <HEAD> with DEFER keyword wrapped in conditional comments:<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->*/function fixPng() { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5 && version < 7.0) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i]; var imgName = img.src.toUpperCase(); if (imgName.indexOf(".PNG") > 0) { var width = img.width; var height = img.height; var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image"; img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')"; img.src = "images/blank.gif"; img.width = width; img.height = height; } } } }fixPng();?