最近碰到的问题-IE6下透明png的解决办法

png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!
但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。
解决这个的方法是增加javascript。具体方法如下:
把下面的代码放在head区就可以解决问题了。




这段js只能是标签的png图片显示png背景.
还有可以是background png显示透明背景的方法:


作为浏览器市场的老大,IE6的罪恶罄竹难书,不支持透明PNG这一“特性”让IE6成为常用浏览器中唯一的异类。IE特有的CSS滤镜虽然可以做到这一点,但是代码比较复杂,而且使用了该滤镜所属标签下的链接失效。在这里和大家分享一个能让IE6不完美支持透明PNG图片的“傻瓜式”脚本,至于为什么是不完美,我们稍后分析……

来源:http://www.twinhelix.com/css/iepngfix/
预览:http://www.twinhelix.com/css/iepngfix/demo/
下载:http://www.twinhelix.com/css/iepngfix/iepngfix.zip
效果:允许IE6正常显示使用标签插入或以CSS background-image方式写入的透明PNG图象。

使用方法:

1、下载脚本脚本,将其中的iepngfix.htc和blank.gif解压缩到合适的目录内,.htc即Html Components,该文件需要在CSS中被调用;blank.gif是一个1×1像素的透明GIF图片,缺少该文件会使标签插入的PNG图象显示为红色的叉烧包。

2、在iepngfix.htc中修改blank.gif的路径,var blankImg =‘blank.gif的正确路径’,这是惟一一个需要修改的配置。

if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif’;

3、在css中将需要使用透明PNG的元素与.htc文件关联。

例如:*{behavior: url(iepngfix.htc) }

轻松三步,IE6就能支持透明PNG图片了。

进阶使用:

1、在css中使用通配符“*”调用.htc脚本会对body内所有标签进行处理,加大客户端的资源消耗,延缓页面载入时间。我们可以细化CSS选择器针对某一个标签甚至是某个ID的元素来套用脚本以获得更好的用户体验。

例如:img,div{behavior: url(iepngfix.htc) }
div#header{behavior: url(iepngfix.htc)}

如果无法预见页面中哪些地方需要这个滤镜,还可以将behavior写入成class以便调用。

.pngsupport{behavior: url(iepngfix.htc)}

2、利用IE的条件注释使脚本只应用于IE6及以下版本,减少对IE7用户的影响。


*{behavior: url(iepngfix.htc)}

3、behavior是IE特有的属性,直接写入样式表将导致页面无法通过W3C的css验证。使用以下脚本写入behavior就可以解决这个问题,前提是页面必须有一个外部样式表,并且位于这个脚本的上面。这种方法的不便之处每次只能添加一个选择符。

.

缺陷:

在文章开头我就说过这个脚本不是完美的,一起来看看iepngfix.htc都有哪些短版吧。

1、使用PNG透明背景可能导致该元素内部链接无法点击,尤其在链接具有float属性的时候,如:存在于一个浮动列表中的链接。推荐解决方法:使用display:inline代替float来实现块级元素的的横向排列。

2、img标签的插入的透明PNG图象无法使用右键保存,“另存为”只能取到覆盖在上面的blank.gif。什么?不要blank.gif?等着吃叉烧包吧。

3、作为背景的PNG图象无法被平铺,无法被定位,即background-repeat默认为no-repeat,而background-position彻底失效。

4、在页面刚载入的时候我们依旧能看到PNG图象因为IE6不支持而短暂出现的灰边,时间取决页面文件的大小和网络速度。

5、作者建议为使用PNG背景的元素设置一个固定宽度,但在我的使用中尚未发现width:auto会带来什么问题。

6、不支持低于5.5版本的浏览器,不过这个问题已经算不上问题。

评论 (1)
  1. 沙发
    simba 2008-12-13 09:34