IE png 与 jquery 和 css 问题

Question

function fadehomepage() {

        //Set opacity  to 0
         $('#showcase_home > div > a').css({'opacity':'0'});



        $('#showcase_home > div').hover(    

                function () {
                      var selected_div = $(this).attr("class") + "_hover";
                      $(this).find('.' + selected_div).stop().fadeTo(500, 1)                 
                 },

                function () {
                      var selected_div = $(this).attr("class") + "_hover";
                      $(this).find('.' + selected_div).stop().fadeTo(300, 0)                 
                }

        );
}

CSS 示例中

   div#showcase_home div.shop{
       background:url(img/shop.png) no-repeat top;
       margin-right:0;
   }
   .shop_hover{
       background: url(img/shop_hover.png) no-repeat top;
       width: 290px;
       height:230px;
       display:block;
       padding:0;
       margin:0;
   }

两个 png 都有透明度。我不关心IE6。

1) 在 IE7/IE8 中，鼠标悬停时，shop_hover.png 出现时，它没有透明度，而是显示黑色：S

2) 为什么在 IE 中，如果我将透明 png 的不透明度设置为低于 1，它会失去透明度？

3）我需要多长时间才能在不损失该死的天数的情况下编写代码来仅修复 IE 问题？磷

Answer 1

Png + 不透明度 + IE = 问题。它们是一个糟糕的食谱。因为我每天都会处理这个问题，所以这就是我所做的。

有几个选项可以解决 png 问题。

1. 使用和修改 IE 的 Alpha 图像加载器。 http://msdn.microsoft.com/en-us /library/ms532969(VS.85).aspx

2. 使用名为 dd_roundies 生成图像的 vml 版本，不会出现这些 png 问题。

当页面加载时，调用如下内容：

DD_roundies.addRule('div#showcase_home div.shop');

这应该修复它们，然后悬停时图像应保持固定。