小谈IE6下处理PNG图片的兼容问题

小谈IE6下处理PNG图片的兼容问题

在制作前端页面时，刚刚学习CSS+DIV的前端童鞋们会遇到需要在某一个模块插入PNG图片或者PNG背景，初涉这一行的我总结了三点解决关于PNG图针对IE6不兼容的方法。首先说说GIF和JPEG格式的两类图片的区别：GIF格式分为静态GIF和动画GIF两种，支持透明背景图像，“体型”很小，网上很多小动画都是GIF格式，但是保存出来的图会相对PNG图片边缘带的锯齿更明显一些。PNG能提供长度比GIF小30％的无损压缩图像文件。同时提供24位和48位真彩色图像支持及其他诸多技术性支持。因此针对平时用到得GIF图片和PNG图像制作网页时会出现得问题：例如GIF图片视觉上看着不太和谐，放到浏览器里总是能看到图片边缘明显得有小锯齿。PNG图片边缘得锯齿看着较GIF图稍微好一点，通常情况下我们是建议使用PNG图片的，但是png图片在IE6下透明背景并非是透明的。针对以上问题，以下是我用的三种小方法，不成熟得地方望指出：

（1）针对GIF/png图像边缘带明显锯齿情况解决的方法：在PS里保存GIF/PNG格式的图片时尽量使用PNG-8，且加个描边之类的，减小锯齿的严重程度；

（2）针对png图片IE6下背景不透明：可以专门针对IE6写hack语句。例如_color:#333;_margin-top:20px；在IE6下使用GIF背景图，对其它浏览器使用PNG背景图，减小图片显示得缺陷；例如：

.conimg{width:1200px;height:158px;margin-top:40px;background:url(images/liucheng_img.png)no-repeat;_background:url(images/liucheng_img.gif) no-repeat;}

（其中需要注意的是：background语句一定要写在_background语句之前，否则将无法实现在IE6下使用GIF图；）；

（3）. 通过JS脚本实现判断浏览器版本问题（是IE6还是不是IE6），对IE6使用GIF格式图片；对其它浏览器使用PNG图片；代码如下：   

<scripttype="text/javascript">

var browser=navigator.appName

varb_version=navigator.appVersion

version=b_version.split(";");

vartrim_Version=version[1].replace(/[ ]/g,"");

if(browser=="MicrosoftInternet Explorer" && trim_Version=="MSIE6.0"){

alert("IE6.0");

$(".png").hide();

$(".gif").show();

} 

   else{ alert("非IE6.0");

   $(".png").show();

   $(".gif").hide();}  

   </script>