这是一篇最早发在QQ空间的文字。
好久没上空间了，年前因为某些事情，清空了QQ空间的太多回忆，嗯，太多。现在有些后悔了，当然后悔的还是自己，不过在这里，想起乐嘉的一句话，原话忘了，大体是在表达这么个意思：真正爱你的女人，不会在乎你的过去，也不会左右你的未来。所以，不要因为你现在的女人就把你给曾经女人写的情书烧掉，因为曾经的那段感情是你真实的经历，而情书是你对历史缅怀的为数不多的东西，也许你内心想，你爱现在这个女人，烧了就烧了吧，但是，到老了你会后悔的。
好，不扯这些没用的，这次写东西，是谈技术，不鬼扯一些没用的。这个解决方案我在人人网发布过一次，QQ空间是第二次发布。
进入正题。
web开发过程中，前台程序设计者可能会经常遇到这么一个问题，优雅漂亮的png格式的图片在ie6浏览器中显示不正常，本来透明的地方可能会被ie6补成一片灰色。对，是的ie6本身只支持到png8，深度再深一点就完蛋了，那么，我们怎么才能让ie6支持png24呢？
这个网上有很多解决方案，曾经我一直在用filter，这是微软给出的解决方案，能用是能用，可是用多了就不行了，耗不起，影响页面打开的时间，卡，有时候死卡死卡的。而且，对于那些使用了filter的网页元素，内部的表单对象竟然受到影响，这个就有些致命了，有时也会影响到position的位置。
好，那么这些问题怎么解决？
在这里推荐一款外国朋友开发的js插件。
DD_belatedPNG，它开放源代码的。 http://www.dillerdesign.com/experiment/DD_belatedPNG/
这个插件用到是vml技术，微软的一个技术。
你可以去上面的这个网站上下载到这个js，很简单，就是一个js，而且是仅仅几KB的小文件。官方是有例子的，不过官方是英文的例子，那么在这里我给出一个例子。
上图呢是我网站的文件，META-INF文件夹和WEB-INF文件夹可以忽视，我是做java开发的，那些是一些jee文件夹，用到的文件主要是index.html，DD_belatedPNG_0.0.8a-min.js，bg.png，ico.png，wallpager.png，qqweb_logo.png。ok，就这些文件，本来想打个包发上来的，可惜QQ似乎不能发附件啊。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>这是一个几乎完美的解决png透明的方案 - QQ:284885069</title>
<script src="jquery-1.4.4.min.js"></script>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.png_bg,img,.test_mo');//demo by 赵振华
</script>
<![endif]-->
<script type="text/javascript">
$(function(){ //这里是干嘛的，这里是解决ie6鼠标滑过效果小bug的思路
var first = true;
var time = 0;
$(".test").mouseover(function(){
$(this).addClass("test_mo");
$(this).prev("shape").show();
time ++ ;
}).mouseout(function(){
if(time == 2 || !first){
$(this).removeClass("test_mo");
$(this).prev("shape").hide();
//$(this).prev("shape").hide();
time = 0 ;
}
first = false;
});
});
</script>
<style type="text/css">
body{margin: 0;padding:0;background: url("wallpaper.png");}
.png_bg{background: url("bg.png");width: 100%;height: 80px;}
.test{position: absolute;left: 100px;top: 100px;width:90px;height:40px;border: 1px solid #000000;}
.test_mo{background: url("qqweb_logo.png");}
</style>
</head>
<body>
<div class="png_bg">
<input type="text" value="我是可以编辑的！"><img alt="透明图片" src="ico.png">
<div class="test"></div>
</div>
</body>
</html>好了，从这个文件就可以很简单的看出，只需要 在ie6引入js文件，并用DD_belatedPNG.fix('.png_bg,img,.test_mo');这一句来处理一下，可以接受多个，可以是一个样式名字，也可以是img标签。
差不多了，更具体的就去网站上看。
Comments