关于ie6下png图片的透明问题,市面上有很多的解决方案【我在前面写过2篇相关文章(透明png在ie7显示为黑色背景的解决办法、关于ie6中使用css滤镜后链接无法点击的问题)】,主要有以下2种:
(1)、js修复法:
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=”/\’”" + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(“onload”, correctPNG);
(2)、css滤镜法:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/images/**.png”);
上面2中方法都有一些缺陷。如链接失效问题,虽说可以用position:relative来修复,但是不一定百分百管用。
今天我主要介绍一种更加完美的解决办法,那就是
DD_belatedPNG。
如何使用:
1、先点击上面的链接去下载DD_belatedPNG.js,里面有一种压缩版本,一种未压缩版本。你下载哪个都行,下哪个在网页引用js的时候就用哪个的文件名。
2、在页面中应用js:
<!--[if IE 6]>
<script src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
<!--[endif]-->
3、ok!
16 Comments
PNG的透明还真难啊,还是gif用起来的简单`~
[回复]
aisinvon Reply:
九月 25th, 2009 at 20:44
@三脚猫, 关键有些情况不得不用png啊
[回复]
不用IE6很久
[回复]
aisinvon Reply:
九月 25th, 2009 at 21:49
@白银时代, 我也不用很久啦
[回复]
IE 基本被封杀了
[回复]
走自己的路,让IE用户哭去吧XD
[回复]
aisinvon Reply:
九月 26th, 2009 at 00:04
@lovee, 调试ie6的问题都能把我弄哭咯
[回复]
小毅 Reply:
十月 4th, 2009 at 23:27
@aisinvon, 写主题的时候,哭的眼都瞎了。哈哈
[回复]
额 没早点看到
我的解决方案是 直接把png的背景弄成了白色····
[回复]
aisinvon Reply:
九月 26th, 2009 at 00:04
@小鸡哥哥, 现在学习也行啊
[回复]
正需要这个 没想到你居然帮我分析好了 做了一个有阴影的登录框 但是PNG在IE6下却无法表现 让人很是郁闷 只好修复那个该死的BUG了
[回复]
aisinvon Reply:
九月 26th, 2009 at 00:05
@Eleven, 恩,能帮到你就好
[回复]
这是个好方法,不过网页弄成白色背景最方便了,省事的办法。
[回复]
aisinvon Reply:
九月 26th, 2009 at 00:06
@亦歌, 但是有时设计图并不是我做的,要按别人的设计图来,没办法
[回复]
我都尽量不用复杂的主题了。站长统计的数字显示IE6还是占据大片江山啊- -!!
[回复]
aisinvon Reply:
九月 26th, 2009 at 22:38
@晴空落叶, 是啊,所以没办法,我们做网页现阶段还是必须得兼容ie6哇
[回复]
小毅 Reply:
十月 4th, 2009 at 23:29
@晴空落叶, 很庆幸,问了很多人,一般IE的占有率正在高速下滑。哈哈,福音啊,希望Win 7 的推广能彻底改变这一糟糕的状款。
[回复]
aisinvon Reply:
十月 5th, 2009 at 13:42
@小毅, 嗯,我巴不得ie6赶紧消失在地球上
[回复]
以前弄了个引导页就是PNG的图片。因在IE6下不能显示。所以就没用了。 在网上找了些方面也没效果。
所以现在PNG的也不怎么用了。 有GIF替代了。
[回复]
aisinvon Reply:
九月 26th, 2009 at 22:39
@阿东, 嗯,有些情况下用gif代替是方便多了
[回复]
基本不用了。
[回复]
jq有这么一个插件,还算不错~
[回复]
最后的代码好像有点小差错哦 最后我去那个英文网看的 效果还蛮好的
[回复]
aisinvon Reply:
九月 26th, 2009 at 22:38
@Eleven, 哪里,没发现啊
[回复]
喜欢那个CSS滤镜法
[回复]
aisinvon Reply:
九月 27th, 2009 at 21:49
@Hobo, 各有所好,能解决问题就行
[回复]
小毅 Reply:
十月 4th, 2009 at 23:29
@Hobo, 据说会卡住浏览器的,特别是对象本来就是性能极差的IE6…………
[回复]
暂时不用,收藏之
[回复]
aisinvon Reply:
九月 27th, 2009 at 21:51
@sleepy, 多谢收藏
[回复]
一直想解决这个问题,就是解决不了,马上下载来看看,多谢分享了
[回复]
aisinvon Reply:
九月 28th, 2009 at 23:00
@Gonten, 不客气,能对你有帮助就好
[回复]
呵呵,以后要用再慢慢看
[回复]
aisinvon Reply:
九月 30th, 2009 at 23:31
@jaycn, 恩,学习就是积累
[回复]