Problema con fade jQuery en IE8

Bueno, el problema es tal como dice el título. Tengo un efecto de rollover con css. Es una misma imágen que al poner el ratón sobre ella se mueve provocando el efecto "sobre". Sólo con css funciona bien, sin embargo, al aplicarle el efecto fade con jquery en IE8 y anteriores en el momento del efecto el fondo transparente de la imagen muestra un horrible manchón negro.

El html:

Código HTML :

<ul class="fade">
    <li class="rss">
       <a href="rss/noticias.php" type="application/rss+xml">
          <span class="rollover"></span>
          <img src="img/rss.png" alt="Canal de Noticias RSS">
       </a>
    </li>
</ul>

El css:

Código HTML :

.rss{background-image:url(../img/rss.png);}
li.rss a{width:25px;height:25px;}   
li.rss a .rollover{width:25px;height:25px;background-image:url(../img/rss.png);background-position:-25px 0px;}

El js:

Código HTML :

$(document).ready(function(){
   $(".rollover").css({'opacity':'0'});
      $('.fade a').hover(
         function() {
            $(this).find('.rollover').stop().fadeTo(300, 1);
         },
         function() {
            $(this).find('.rollover').stop().fadeTo(300, 0);
         }
      )
});

He probado con varios script que se supone que solucionan el problema de las transparencias de los pngs pero ninguno me ha funcionado aún. Sólo he logrado algún avance poniéndole un fondo de color al div que contiene la imagen, sin embargo, necesito la transparencia porque está sobre un fondo con formas y colores.

¿Alguna solución que no implique renunciar al fondito que está tras la imagen?

Buena Caza y Largas Lunas.

Quizás te funcione:

Código :

img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;
}

Revisa este thread de stackoverflow.

Gracias por contestar Kinduff pero nada, incorporé tu código en mi css pero no hace nada.

De verdad que este asunto me tiene bien cabreado y aún no logro solucionarlo.

Es una imagen png con transparencia verdad? me refiero al botón.

Hola lucifer, en efecto, se trata de un png con fondo transparente en el que se encuentran los dos estados del botón (normal y hover). Al hacer la animación del hover con jquery se ve horrible una mancha negra. Probé poniéndole un color de fondo al div que la contiene, pero bajo el botón tengo un fondo con formas y entonces se ve horrible el cuadrado del fondo del botón.

Hola, si entiendo tu problema, me paso varias veces. Aqui la solucion:
1)- Puedes hacer una alternativa CSS(css for IE-google) solos para IE, osea en lugar que sea un png, sea un jpg, pero no con fondo blanco, si no con el mismo color de fondo.
2)- Puedes hacer la condicional con jQuery para IE con jquery browser, y hacer que no haga FadeIN y fadeOut, sino un simple Over.
3)- Haz una condicional CSS con CSS for IE o jQuery(jquery browser),para que en IE en lugar de cargar una imagen PNG, cargue una imagen .GIF me ha funcionado y creo q esta es la mas sencilla.
Espero te sirva

Vale eareddhel, una vez encontré ese mismo problema, y fue tan sencillo como conservar el formato png pero donde usas ahora transparencia en dicho archivo ponerle un color que sea igual que el fondo, y así no te saldrá la mancha negra en IE usando fadein y fadeout.

PD: es lusifer no lucifer¡

Jajajajaja... Gracias Lusifer... De hecho, había pensando en eso, onda capturar web y ponerle el fondo exacto que tienen las imágenes de mis botones de redes sociales. Quizás sea la única solución para este desagradable error de IE8.

Buena Caza y Largas Lunas!!!

Q?, acaso no leiste mi solucion??? -.-¡

Wow!!! Mil disculpas lekofev. Por alguna razón cuando contesté el último post no me apareció tu comentario, por lo que recién acabo de leerlo. Y muchas gracias, creo que al final la mejor solución por el momento es hacer que sólo haga un over en IE. Gracias y mil disculpas.