最近做公司网站，代码写得差不多了，开始美化后台界面。因为是用 DIV+CSS 所以遇到了很多以往用表格打版所不曾遇到的小问题，却很是郁闷。
就像这个登陆页，因为版式有两分“异”，实在不知如何切片的好，因为这里的关键就是那个小水晶按钮。如果还按常规切的话，定义多个 DIV ，就没啥意义了，还不如直接用表格来得好。所以，想了想，把图片尽可能的优化后，做成了一个大背景，只把那按钮提出来。因为有一圈外发光，所以不能用 GIF，只好做成 PNG，于是问题就出来了：
首先：IE6 是不支持透明 PNG 的，需要调用 AlphaImageLoader() 滤镜。
其次，发现还是不正常，图片并没有真正透明，或者像 GIF 一样，有毛边。同事小包说是 PS 输出的 PNG 格式有问题，并用 Illustrator 又重新给绘了一个按钮。果不其然，这次再调用时，真正透明了。
后来，又有问题了。因为这里是要做按钮的，想不出如何在按钮的 SRC 上去加调样式。郁闷得紧！小陈同志又想到了办法，同层的原理一样，换成一个 1 象素的图片，用调用滤镜样式后的 PNG 按钮图片填充象素图片，解决问题。
正欢呼中，又发现了问题！样式调用之后，本是支持 PNG 透明的 FireFoX 里边又不正常了，因为不认这调用也就不见了按钮，狂晕！唉，绕了半天，又回到最初，只有用最原始的方法，判断浏览器类型了，效果最终实现！
if (navigator.appName!="Microsoft Internet Explorer") {<br />
document.write("<input name=\"\" type=\"image\" src=\"images/button.png\" />");<br />
}else{<br />
document.write("<input name=\"\" type=\"image\" src=\"images/spacer.gif\" style=\"width:100%;filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;images/button.png&#39;,sizingMethod=&#39;image&#39;);\" />");<br />
}<br />
</script>
唉，为了一个按钮透明，我容易么？一度都想放弃了，就像急着上厕所一样，自已漫无目的地找，还有很多人指路，可七绕八拐真到了里间时，内急早就给憋没影了。甚至有想过就用 DIV 算了，直接在上面加 Onclick ；或者直接插个 SWF 进来直接调用 PNG。哞，只有苦笑，就算 IE7 又怎么样？要我说啊，最好还是各种浏览器全都集合起来，统一标准，再无区别才是王道啊！可惜，这是讲不完的《一千零一夜》，真真切切的天方夜谭啊！！！
3 条评论 Trackback Url：http://ichov.com/web/png-transparent.html/trackback
有同感，我也快被整死球了。。。。
哎，是啊！NND！
终于找到同志了 啊!!!!!!!!!!!!!!!!!!!!!