解决png图片在IE6下的透明问题

已经几天没更新博客了，也就是这几天学习上的进账收效甚微，原因是在准备毕业答辩的事，还有两天时间用在了跑去东莞面试，面试的结果很悲催呵呵。自己其实自我感觉还过得去吧，至少能工作，但就是自己还不够自信，在别人面前总会表现出一副初学者的样子，这是很不好的。

      感慨的事就不说了，进入正题。

      昨天在某Q群，有人大呼：谁给他解决他的PNG图片在IE6下的透明问题，他就给谁充话费。我手快了点，直接打上，我来！

但我只知道这类问题谷歌上很多解决方案，属于非常常见的问题，以前我做的时候，这类透明我都是用gif，而直接避开png，所以到现在我并没有去了解过这个问题。但昨天不得不寻找资料了。

      最终，我找到的解决方案如下：

_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/nav_hover.png',
sizingMethod='crop');

      没错，根据找到的方案，我写出来的路径正是如下面的'img/nav_hover.png'，运行一切非常正常。但是，到了他那里，他修改了图片路径，怎么也显示不出来，但我看他修改的路径也没错啊，但就是显示不出来，非常奇怪。

      我尝试着在一个高手群上问，印象中，某高手一语中的的说明了我这个问题，但我当时没注意，他们就又接着讨论说用png透明不好怎么怎么的，我只能回谷歌寻找了。找啊找啊，终于在众多的信息中找到一句：“这图片路径是相对于html页的，而不是常规的相对文件所在位置”，啊，整个世界都明了。

      在我这本地测试，我的css是跟html同在一个根目录下，图片在img目录下，所以我上面的img/nav_hover.png是碰巧中撞对的。而在对方的服务器里，他的目录结构是style,images，也就是说，他在CSS文件中按正常引用的路径是:../images/nav_hover.png。这样就错了，相对于html，他的路径正确应该是image/nav_hover.png。

      最终，问题解决了，话费没跟他要，因为我也因此学习到了。

/*******************************华丽的分隔线************************************/

/********2011-6-16追加*******/

最近工作时学到一招更好的，用JS，下面的部分引用别人的解释，木有时间写博，纯属存档。

IE6下PNG背景透明或者图片透明一直让人很伤脑筋，以前的解决办法也不尽完好。

最近在项目中，发现了一种几乎完美的解决办法。用JS在IE6下面实现png图和背景PNG透明。

不敢独享，写下这篇文章，也好为自己以后查阅，利人利己啊。

并且，可以解决a:hover 背景png的问题。下面开始，三步即可搞定IE6下PNG透明问题。

第一步：下载JS文件DD_belatedPNG_0.0.8a.js

下载地址：dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

第二步：引用JS文件

<!--[if IE 6]>

<script src="DD_belatedPNG_0.0.8a.js" mce_src="DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
   /* EXAMPLE */
   DD_belatedPNG.fix('.enter,.enter a,.enter a:hover');

   /* string argument can be any CSS selector */
   /* .png_bg example is unnecessary */
   /* change it to what suits you! */
</script>

<![endif]-->

PS:灰色文字部分【'.enter,.enter a,.enter a:hover'】，为div选择器的名称，大家看后面的html代码即可明白

第三步： 网页body部分

<style type="text/css">

.enter { width:193px; height:43px; position:absolute; bottom:15px; left:60%; z-index:100; color:#FFF}

.enter a{ width:193px; height:43px; display:block; background:url(enter.png) no-repeat;}

.enter a:hover{width:193px; height:43px; display:block; background:url(enter.png) 0px -43px;}

</style>

<div class="enter"><a href="index.php"></a></div>

好了，大家预览一下效果吧。

至此，IE6下png图片透明和IE6下面png背景图片就完美显示了。

偷懒的处理办法

直接用*号
 

<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js" mce_src="DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->