IE6下png透明hover效果处理方案

IE6，大家都懂的!该考虑还是要考虑的!png透明是IE6常见的bug，w3cfuns有一篇完美处理方案!这里说下hover时png的处理!

最近几个朋友都遇到hover问题时候不能得以处理,时生和丽丽两位童靴分别给出不同方案,备份下方便下!
嘿！DEMO传送点这里
1、用DD_belatedPNG.js解决

DD_belatedPNG.js可以说目前解决png最佳方案之一, 在站内有大量png处理时候可以考虑!

可以参考:uzone.cc的处理方案,在结构上加一个空层单独做背景,避免DD_belatedPNG.js失效;

<ul>
<li class="ddz select">
<div class="game_bg"><i></i></div>
<a href="javascript:;">
<h3>UU斗地主</h3>
<span class="level5"></span>
<p>UU斗地主有宝斗地主是一款集3D...</p>
</a> </li>
<li class="dn">
<div class="game_bg"><i></i></div>
<a href="javascript:;">
<h3>UU斗牛</h3>
<span class="level3"></span>
<p>栩栩如生斗牛形象快速富有节奏...</p>
</a> </li>
<li class="cdd">
<div class="game_bg"><i></i></div>
<a href="javascript:;">
<h3>UU锄大地</h3>
<span class="level4"></span>
<p>比肩于国粹麻将的锄大地，严谨...</p>
</a> </li>
</ul>

DD_belatedPNG.js引用:

DD_belatedPNG.fix('#game_detail .game_bg,#game_detail li i,#game_detail .select i,.game_img a');

此方案优点:支持css sprites,可处理png不透明bug;缺点:引入的js略大
2、滤镜解决方案:

 

.game_detail2 .game_bg0{
position:absolute;
left:0;
top:0;
height:121px;
width:236px;
z-index:3;
background:url(../images/game_item2.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/game_item2.png");
}
.game_detail2 .select .game_bg0{
height: 118px;
cursor:pointer;
background:url(../images/game_item1.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/game_item1.png");
}

优点:针对少量png优选;缺点：不支持css sprite

参考资料:

IE6 PNG透明终极解决方案(打造W3Cfuns-IE6PNG最强帖)

本文由江涛编辑；原文地址：http://www.321xz.com/xhtmlcss/IE-png-hover-bug.html，转载请保留出处;