透明png在ie7显示为黑色背景的解决办法

985 views

这两天一直被ie下png背景图透明的问题所困扰。

以前遇到这种问题,

写上一句css或在head部分链接上一段专门处理ie6 png背景图透明的js,一般问题都能解决。

可是这次,我把处理png背景透明问题的各种方法如css法,js法,iepngfix.htc法都用过了。ie6和ie7下都不透明,而且ie6和ie7的背景还是不同的效果。本来应该透明的背景在ie6里是一篇灰色,在ie7下则是一片黑色。这也太奇怪啦。

正常来说,ie7和火狐一样能够支持透明,不支持透明的只是ie6而已,但这次ie7下怎么是一片黑色的效果呢?

我很费解啊。

想这个问题我想了2天。在第2天下午,我尝试着把要透明的那一段html、css以及js独立出来,看看到底是不是css或js互相冲突引起的。

将html、css和js独立出来以后,代码就很少啦,所以看着就比较清晰。我就一个个试啊试啊,暂时还是没找到原因所在。

只好硬着头皮继续测试。

我把jQuery里一个tooltip的效果由toggle改为slide或fade后,再一保存,刷新看一下。哇塞,ie7下的黑色大背景变透明鸟啊。

真是兴奋,原来问题出在这里。

我在页面里使用了jQuery的tooltip插件,然后是这样写的代码:
$(function(){
$(“#nav03″).tooltip({
tip: ‘#nav03Hover’,
offset:[85, 73],
effect:”toggle”
});
})
将effect里的toggle改为tooltip的其他效果后,ie7的黑色背景就没有了。

现在ie7就变得和火狐一样,透明png背景都能实现透明效果啦。

如果你也正在为透明png背景在ie7下显示为乌漆抹黑的一片,或许就是我描述的这种问题哦,那就赶紧试试我这方法吧。

Category 经验记录 Tagged , , , Post a comment or leave a trackback: Trackback URL.

13 Comments

  1. Posted 2009年09月23日 at 20:55 | Permalink

    我一般能用gif解决就尽量用gif,该死的ie

    [回复]

    aisinvon Reply:

    @zwwooooo, 关键是有些地方它必须用png透明。ie6真令人头痛

    [回复]

    Lazyyyyyy Reply:

    @zwwooooo, 没想到这里都遇到Z叔叔~

    我是搜索CSS与JS样式的冲突问题而来到这里的~

    因为不知道为什么我那个站调用jiazhis的浮动按钮样子有问题……

    虽说这篇文章不是解决我那个问题的,不过也算是长见识了~

    [回复]

  2. Posted 2009年09月23日 at 21:16 | Permalink

    我那logo以前也是那样,这次才改了下。

    [回复]

    aisinvon Reply:

    @phenix, 哎,兼容是个大麻烦啊

    [回复]

  3. Posted 2009年09月23日 at 22:39 | Permalink

    一直都是用火狐!IE用的少!

    [回复]

    aisinvon Reply:

    @分享联盟, 我现在也是基本用火狐的

    [回复]

  4. Posted 2009年09月23日 at 22:44 | Permalink

    呃,偶原来都是故意用的半透明png来欺负IE用户=v=

    [回复]

    aisinvon Reply:

    @lovee, O(∩_∩)O,还能这么搞

    [回复]

    lovee Reply:

    @aisinvon, 因为被很多IE Only的网站弄的很生气=_=||||||||||||||||

    [回复]

    aisinvon Reply:

    @lovee, 呵呵,那是彼此彼此啊

    [回复]

  5. Posted 2009年09月23日 at 22:49 | Permalink

    这个问题到目前为止还没遇到过!先收着!

    [回复]

    aisinvon Reply:

    @kevin, 没遇到是好事啊,不然就头痛啦

    [回复]

    kevin Reply:

    @aisinvon, 嗯,有时候从遇到至解决也是一种学习

    [回复]

    aisinvon Reply:

    @kevin, 那是

    [回复]

  6. Posted 2009年09月23日 at 23:16 | Permalink

    老问题了已经是,天杀的IE什么时候才能统一成8呀

    [回复]

    aisinvon Reply:

    @sleepy, 是啊,啥时候是个头啊

    [回复]

  7. Posted 2009年09月24日 at 08:09 | Permalink

    我不会头疼的。

    [回复]

    aisinvon Reply:

    @太阳博客, 我会头疼啊,呵呵

    [回复]

  8. Posted 2009年09月24日 at 08:55 | Permalink

    对这个问题接触的较少,呵呵

    [回复]

    aisinvon Reply:

    @健康播报, 少碰到为妙哦

    [回复]

  9. Posted 2009年09月24日 at 15:44 | Permalink

    这个问题很难解决的啊

    [回复]

    aisinvon Reply:

    @卢松松, 是啊,没有一个完美的解决办法

    [回复]

  10. Posted 2009年09月24日 at 19:06 | Permalink

    还在折腾IE啊,换Firefox吧

    [回复]

    aisinvon Reply:

    @我想想, 我换firefox问题也解决不了啊,我换用户不换啊

    [回复]

  11. Posted 2009年09月24日 at 21:28 | Permalink

    见识了,顺便研究一下呵呵

    [回复]

  12. Posted 2009年09月24日 at 22:03 | Permalink

    解决了IE7解决不了IE6。。
    还是gif吧,省点流量

    [回复]

    aisinvon Reply:

    @A.shun, 我现在已经发现一种比较好的解决办法啦。过几天分享上来

    [回复]

    A.shun Reply:

    @aisinvon, 那就等着你的大作了

    [回复]

    aisinvon Reply:

    @A.shun,大作不敢当啊

    [回复]

  13. Posted 2009年09月25日 at 16:10 | Permalink

    不是js和css冲突吧,是js里面重新定义了css的样式吧?

    [回复]

    aisinvon Reply:

    @世纪之光, 不是冲突,也不是js定义了css,而是toggle的效果导致的

    [回复]

One Trackback

  1. [...] 关于ie6下png图片的透明问题,市面上有很多的解决方案,我在前面写过2篇相关文章(透明png在ie7显示为黑色背景的解决办法、关于ie6中使用css滤镜后链接无法点击的问题)主要有以下2中: [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>