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{margin0;padding:0;backgroundurl("wallpaper.png");}

.png_bg{backgroundurl("bg.png");width100%;height80px;}

.test{positionabsolute;left100px;top100px;width:90px;height:40px;border1px solid #000000;}

.test_mo{backgroundurl("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标签。

差不多了,更具体的就去网站上看。

posted @ 2011-02-12 20:52  大大的白鲨  阅读(732)  评论(0编辑  收藏  举报
知心爱人网   烟台龙口海景房    济南网站建设    济南网站制作    济南网络公司    济南网站建设公司    济南建网站公司