IE6不支持透明PNG的解决方法

有时我们需要使用带透明背景的PNG图片,但是IE6并不支持24位透明PNG图片。解决方法有以下两种:

一、使用微软滤镜来修复PNG图片透明问题

微软滤镜可以修复PNG图片的透明背景问题,因此,我们可以使用星号HTML hack的方式,使滤镜代码单独作用于IE6浏览器。

* html css元素{
background:none;//使原来设置的背景在IE6下不生效
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xx.png",sizingMethod="image");//应用滤镜
}

不过,使用了这段代码之后,css就不符合网页标准了。为了避免这种情况,我们其实可以使用条件注释的方式,使该代码独立于正常的css代码

<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="win-ie-all.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="win-ie7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="win-ie6-below.css" type="text/css" media="screen" />
<![endif]-->

然后,我们仅需要将以上代码写在win-ie6-below.css里面即可。

 二、使用脚本来修复PNG图片透明的问题

以上方式虽然可以让PNG图片的透明效果显示出来,但却有一个致命的缺点:滤镜使得图片失去了“背景”的定义,因此不能再调整一些css背景属性如background-position和background-repeat。这会带来很大的麻烦,尤其是当你需要调整背景图片的位置或者设置平铺时。因此,我们有时需要另寻办法,好在,有个Javascript库叫做DD_belatedPNG提供了更好的办法,可以让我们正常使用PNG图片作为背景,只需要在head部分引入这个文件(www.dillerdesign.com/experiment/DD_belatedPNG),并调用相应的函数即可。

<!--[if IE 6]>
<script src="DD_belatedPNG.js" type="text/javascript"></script>
<![endif]-->
window.onload=function(){
if(typeof DD_belatedPNG == "function"{
DD_belatedPNG.fix("css元素");
}
}

目前为止,这是比较完美的解决方法。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>