ie6支持png半透明bug解决方案
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文件夹可以忽视,我是做web前端开发的,那些是一些jee文件夹,用到的文件主要是index.html,DD_belatedPNG_0.0.8a-min.js,bg.png,ico.png,wallpager.png,qqweb_logo.png。ok,就这些文件,本来想打个包发上来的,可惜QQ似乎不能发附件啊。
下面贴出index.html文件的代码:
<!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标签。
差不多了,更具体的就去网站上看。