jquery - 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');

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