ie pngfix.htc存在问题和IE6下PNG图像透明及背景图闪烁完美解决方案

ft28

浏览: 40218 次
性别:
来自: 北京

最近访客更多访客>>

ccxy0070

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript

终于可以和 iepngfix.htc 说拜拜了！ DD_belatedPNG完美地解决了iepngfix.htc会出现的无法平铺，没法定位以及所加超链接的点击区域无法使用等问题！

关于ie中png图片做背景不透明的问题，一直都是很让人头疼的，关于这个问题我也尝试过很多方法，终于让我找到了一个好东西，分享给大家。只要把这个文件（下载即可）放到css文件夹里，同时要在css样式里写入以下代码：

img, div, input { behavior: url("css/iepngfix.htc")}

但是，iepngfix.htc会出现的无法平铺，没法定位以及所加超链接的点击区域无法使用等问题！

官方网址：http://www.twinhelix.com
http://www.twinhelix.com/css/iepngfix/

现在它网站上更新到了V2.0 Alpha4。

ie6支持png8格式，但是不支持png24格式，通常所说的ie6透明问题都是基于png24的。放送一个小技巧：在png8与png24显示效果差不多的情况下就可以直接用photoshop把格式转化为png8格式的就可以了，而且png8的图片特别小噢。

下面开始进入正题：

一直以来不知道多少人因为ie6下的透明问题头疼不已，今天终于能得到解脱了。

在http://www.twinhelix.com/test/ 下载第一个“IEPNGFix v2.0 Alpha -- with background position/repeat! ”意思是支持背景的位置设定和重复属性。

使用方法：

1.复制 blank.gif、iepngfix.htc、iepngfix_tilebg.js(注意：该文件是支持position和repeat的关键不可缺少)到放置到某个位置。

2.修改iepngfix.htc中的“IEPNGFix.blankImg = '/img/blank.gif'；”把白字部分改为blank.gif所在的位置

3.把iepngfix_tilebg.js加入所要用到的页面（如果position和repeat没效果，那就是这里出问题啦，检查下）

4.在css中设置要透明的地方；如下：

#container{background:transparent url(/img/hotelpage/content_bg_03.png) no-repeat scroll left bottom; }

#container{behavior: url(/png/iepngfix.htc) }。(这段代码就是引用iepngfix.htc文件)

http://www.twinhelix.com/css/iepngfix/

下载这里就不提供了，直接上它的网站下载最新版的。还有示例。

URL：http://dillerdesign.com/experiment/DD_belatedPNG/

终于可以和“iepngfix.htc”说拜拜了！

DD_belatedPNG完美地解决了“iepngfix.htc”会出现的无法平铺，没法定位以及所加超链接的点击区域无法使用等问题！

详细文档见http://dillerdesign.com/experiment/DD_belatedPNG/。这里就不提供翻译了，哪位大大有时间有精力就来个翻译文档吧。08年末这东西刚出来的时候国内就有人发过这个方法，但不知道为什么，没引起什么“效应”，很多人还是在用上面说的“更具局限性”的方法。

使用方法很简单，首先下载调用JS

0.0.8a.js (未压缩版本, ~12Kb)
0.0.8a-min.js (压缩版, ~7Kb)

之后在使用PNG的页面中引用代码

<!–[if IE 6]>
<script type=”text/javascript” src=”下载下来的JS路径”></script>
<script>
DD_belatedPNG.fix(’CSS选择器, 应用类型’);
</script>
<![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和background两种）。

如DD_belatedPNG.fix(’#box-one, img’) 或者 DD_belatedPNG.fix(’.header, background’) 等。

这些可以简写成 DD_belatedPNG.fix(’#box-one, .header, img,background’); 。

更多选择器的如 DD_belatedPNG.fix(’#box-one, .header,#footer,.box-two a:hover, img,background’); 等等。

DD_belatedPNG使用时存在的bug问题：

关于IE6下fix png半透明图片存在定位浮动bug的问题，发现使用插件DD_belatedPNG时，有时候使用，有些PNG背景图出现了浮动偏移，感觉就象是背景图片象绝对定位那样偏移了原来的位置，感觉象变成了一个层相对body的绝对定位，于是在容器内设置position:relative，没想到效果是可以的。
例如：

<body>
<script>
DD_belatedPNG.fix('.dd,img,background');
</script>
<div id="wrap">
<div class="dd" style="background:url(../images/bg.png)"></div>
</div>
</body>

有可能会出现.dd层偏移到了body的left:0,top:0的位置，
所以，有可能要对.dd层的容器#wrap用positon:relative进行定位。

另外，为解决IE6下背景图闪烁，可以定义下html的CSS

html {filter:expression(document.execCommand(”BackgroundImageCache”, false, true));}

分享到：

(转) html 响应式设计 | java_5个让人激动的Java项目

2013-01-28 23:43
浏览 1364
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论