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, если я установил прозрачность ниже 1 для прозрачных pngs, он теряет прозрачность?

3) сколько времени прежде чем я смогу кодировать без потери чертовых ДНЕЙ, чтобы исправить только проблемы с IE? P

Answer 1

Png + непрозрачность + IE = проблемы.Это плохой рецепт.Поскольку я имею дело с этим ежедневно, вот что я делаю.

Есть несколько вариантов решения проблем с png.

1. Использование и работа с загрузчиком альфа-изображений IE.http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx

2. Используйте библиотеку с именем dd_roundies , которая генерирует vml-версию вашего изображения, которая не будет иметь таких проблем с png.

Когда страница загружается, вызывается что-то вроде этого:

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

Это должно исправить их, а затем при наведении изображения должны оставаться фиксированными.