欢迎您! 积分 主页 我要学 我要教[] 注册 登陆
学习从此开始

IE6.0支持png图片的兼容性解决方案

所值积分:
浏览量:68
课程类别:IT电脑开发
学习标签:IE6,ie6.0,PNG,图片,兼容性
发布时间:2010-02-04 20:37:41.0

免费在线正则表达式验证工具!
免费在线HTML/JAVASCRIPT/CSS调试工具!

一、首先需要用到的文件:http://www.twinhelix.com/css/iepngfix/

二、解压后将其中的 iepngfix.htc 文件 和 blank.gif 文件复制到相应的目录,这里要说明的是,这两个文件最好放在同一个目录下,(虽然分开放也可以,但是要修改下iepngfix.htc中blank.gif文件的路径,这里就不详细说明了)。

三、接下来你需要在css中引用iepngfix.htc这个文件,应用格式:

img, div

    {
        behavior: url(/iepngfix.htc);
    }

这里的类名是你用到的png文件所在的标签(或类名,建议直接用标签,比较省事);这里要提一下,我看的很多网站上写的方案对这个引用都是 behavior: url(iepngfix.htc);
,这样会造成一些不好的后果,有时会导致有些页面无法实现对png的兼容(这里就不细说了),总之一定要用相对路径。

四、OK,至此,我们已经实现了IE 6.0 对png 图片的兼容,但是对于有用到利用png图片作为背景平铺的页面来说,还没有完,你还要引用一个JS文件(压缩包里也有提供),

当然,路径最好也是相对的:<script type="text/javascript" src=“/JS/iepngfix_tilebg.js”></script> (这个js不一定要和上面的.htc 文件放一起,只要路径对就OK了)。

五、好了,这样就全面的完成了IE 6 对png的兼容,但是这里有个问题,用户每次打开网页的时候,文件都会遍历页面中的png图片,这样会大大影响网页的速度,降低用户体验,

所以我们要做的是,让这两个文件,只在用户所用的浏览器为IE 6 的时候才去执行它!!!

我们可以通过IE 的 if 判断去实现它:

<!--[if IE 6]>
    <script type="text/javascript" src=“/JS/iepngfix_tilebg.js”></script>
    <style type="text/css">
    img, div, ul, li, table, p, tr, td
    {
        behavior: url(/iepngfix.htc);
    }
    </style>
    <![endif]-->

这里建议以上这段代码最好写在你有用到png图片的页面头部<head></head>内!(当然,如果使用了母版也,就只要在母版页中加入就行了)!!

(附:如果还想兼容IE 6 以下的版本只需把“<!--[if IE 6]>” 改为 “<!--[if lte IE 6]>” !)

OK !至此,对于IE 6.0 对png图片的兼容性解决方案就结束了,呵呵,有什么不完善的地方还请各位大虾们多多指教!!!



验证码:验证码

网店名字Don的知识网店
网店店主don
讲师:don
2010-02-28 13:28:46.
讲师:don
2010-02-06 12:19:11.
讲师:don
2010-01-25 15:58:06.
讲师:don
2009-11-07 16:26:41.
讲师:don
1900-01-01 00:00:00.



©2008 - 沪ICP备07037037号 - 简历 - SQL管理 - 邮箱登陆 - RSS阅读