带有 jquery 和 css 问题的 IE png

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) 多长时间后我才可以编写代码而不会失去该死的 DAYS 来修复 IE 问题？ P

Answer 1

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

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

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

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

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

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

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