png在IE6下的解决办法

isiqi

浏览: 16538047 次
性别:
来自: 济南

最近访客更多访客>>

yuxiatongzhi

nison

hellohank

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-07 ( 335)
2012-06 ( 252)
2012-05 ( 362)
更多存档...

HTC CSS IE JavaScript 浏览器

曾经在《关于ie中用png图片做背景的众多问题的解决》文章里讲过用滤镜来解决背景透明的问题，但没有解决循环和定位。正常情况下，ie6不支持png图片做背景，一是不透明，二是不能定位，三是不能循环。今天群里的月下同志的文章参考下我终于解决了这个问题。

1、下载iepngfix.zip， 点击下载此文件

　　其中有三个文件：iepngfix.htc、iepngfix_tilebg.js、blank.gif，将这几个文件解压出来放到所需要使用png做为CSS背景的网站的根目录下。

2.、加入behavior: url("iepngfix.htc");　这个是解决png透明问题

　　用png做背景时，在CSS样式的最后定义一个behaviro属性。

#login_main {
background:url(../img/main.png) repeat 20% 50%;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
behavior: url("iepngfix.htc");
}

　　此时要注意url内的路径是相对于index.htm来说的，而不是相对于定义其样式的css文件。

3、在htm文件中引入上文中提到的第二个javascript文件。这个是解决png的循环及定位问题。

<script language="javascript" src="iepngfix_tilebg.js"></script>

　　将其插入到<head></head>中

优化：

一、当需要用到的png图片比较多时IE6反应会迟钝，因为IE6每次加载需要透明的PNG时都会进行一系列的运算，将png中的alpha透明部分用blank.gif空白位图代替，可以想象这样的计算规模有多庞大。没办法，这是无法避免的，Vista 和IE7早就出来了，还有非常卓越的FF可供选择，使用IE6的客户所占的份额总会渐渐下降的。观察一下，此时使用IE7打开刚刚htm可以发现，本来非常完美而且不需要做任何改动的页面在IE7下也加载得特别慢，看来behaviro属性也影响到了IE7，让IE7也做了繁重的无用功。

#login_main {
background:url(../img/main.png) repeat 20% 50%;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
_behavior: url("iepngfix.htc");
}

　　此时我们的目标是将IE7解放出来，查阅各种浏览器的hack，发现只有IE6在CSS中能够认识下划线“_”，所以我们在刚刚的CSS样式中的behaviro前加上一个下划线。而这个下划线无论是FF或者IE7都是不会去解析的，这样IE7就会忽略这个CSS属性，既而解放了IE7。

二、既然此次处理的目标就是IE6浏览器，所以在首页中的JS加载语句也可以加上一个小小的改动，加上“<!–[if IE 6]><![endif]–>”标签，既而只针对IE6，而解放了其他浏览器，使它们在页面加载时就忽略iepngfix_tilebg.js这个文件，提高效率。而可怜的IE6，让它接受暴风骤雨般的CPU消耗吧，没办法，爱莫能助了。