jquery - ¿Cómo resolver/piratear el desaparecido error PNG semitransparente en IE8?

internet-explorer

Question

Como saben, IE6 tiene un error que no puede mostrar un archivo PNG semitransparente sin utilizar un estilo no estándar como filtro. En IE7, este problema es fijo. Pero todavía tiene algunos errores sobre el archivo PNG. No puede mostrar correctamente el archivo PNG semitransparente. Puedes verlo claramente cuando usas la función show / hide en jQuery con un archivo PNG semitransparente. El fondo de la imagen se muestra con un color negro no transparente.

¿Tienes alguna idea para resolver esta pregunta usando jQuery?

Actualizar

Veamos mis pruebas

texto alternativo http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

Como puede ver, IE8 siempre muestra incorrectamente la imagen PNG-24. Además, IE8 todavía muestra correctamente la imagen PNG-8 cuando me desvanezco (función jQuery.fadeOut) solamente. Pero muestra incorrectamente la imagen PNG-8 cuando me atenúo y cambio de tamaño (función jQuery.hide) al mismo tiempo.

PD. Puedes descargar mi código fuente de prueba desde here .

Gracias,

Answer 1

La ventaja es que IE6 muestra el PNG8 con píxeles semitransparentes, ya que es un GIF, o con total transparencia, pero IE7 y 8 lo muestran correctamente como PNG24 y si se desvanece con jQuery o cualquier biblioteca js, no se mostrará el fondo. con gris, porque no usa la famosa propiedad -filter.

Solo hay una forma en IE de hacer una transformación de opacidad. filtro: alfa (opacidad :). ¿De qué otra manera debería jQuery hacer esto?

Answer 2

1. Define un color de fondo sólido para tu imagen:

   .container img {background-color: white; }

2. Defina la propiedad background-image css de su imagen en su atributo src :

   $ (''img.png-trans''). each (function () {$ (this) .css (''background-image'', $ (this) .attr (''src''));});

Ventaja: no necesita cambiar su marcado

Desventaja: a veces aplicar un color de fondo sólido no es una solución aceptable. Normalmente es para mí.

Answer 3

¿Por qué no pruebas con PNG8? PNG8 es ampliamente conocido como completamente transparente como el formato de archivo GIF. Sin embargo, exportado con Fireworks puede ser semitransparente como PNG24 . La ventaja es que IE6 muestra el PNG8 con píxeles semitransparentes, ya que es un GIF, o con total transparencia, pero IE7 y 8 lo muestran correctamente como PNG24 y si se desvanece con jQuery o cualquier biblioteca js, no se mostrará el fondo. con gris, porque no usa la famosa propiedad -filter.

Answer 4

Acabo de encontrar la manera de resolver el problema por casualidad cuando trato de arreglar el error IE8 en la siguiente imagen.

La manera más fácil: simplemente define el fondo de la imagen actual como el código siguiente. O puede ver el código fuente completo y la demo en mi JsFiddle

#img2
{
    background:#fff;   
}

Sin embargo, si tiene alguna imagen compleja como mi error, debería intentar agregar una capa casi invisible debajo de su imagen y establecer el color de fondo en el color que desee.

Answer 5

Esto se puede hacer de forma similar a lo que Stu ha hecho aquí: http://www.cssplay.co.uk/menus/flyout_horizontal.html

Answer 6

HTML

   <img src="image.png" class="iefix" width="16" height="16" />

en CSS

.iefix
{
 /* IE hack */
  background:none/9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

fácil, rápido y agradable :)

Answer 7

Hasta ahora, nada me ha funcionado realmente, he leído la combinación de configuraciones de opacidad mediante CSS y PNG transparentes. Esta solución terminó trabajando para mí en una página animada de opacidad en IE8. Otras soluciones enumeradas en esta página no funcionaron.

#img {
    background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''image.png'')"; /* IE8 */
    zoom:1;
    width:600px;
    height:400px;
}

<div id=''img''></div>

Tenga en cuenta que el filtro tiene primero un filtro Alpha y luego AlphaImageLoader.

Answer 8

He solucionado este problema con IE 6/7/8.

Se parece bastante a esto:

<div class="wrapper">
  <div class="image"></div>
</div>

...

/* I had to explicitly specify the width/height by pixel */
.wrapper
{
  width:100px;
  height:100px;
}

.image
{
  width:100%;
  height:100%;
  background:transparent url(''image.png'') no-repeat;

  /* IE hack */
  background:none/9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

$(".wrapper").fadeOut(''slow'');

Tenga en cuenta que el atributo "filtro" se dirige implícitamente a IE solamente.

Answer 9

La causa principal del problema parece ser la poca compatibilidad de Micrsoft IE con la transparencia alfa PNG (en cualquier versión de IE). IE6 es el peor delincuente con diferencia, lo que hace que los píxeles alfa-transparentes tengan un color azul pálido. IE7 e IE8 manejan PNG alpha-transparency, pero no pueden manejar el cambio de la opacidad de un pixel transparente alfa en el PNG, se procesan como negro en lugar de transparente.

Mis propias soluciones para esto dependen de la situación. Aquí hay algunos enfoques:

1. Solo usa un GIF. Los GIF no aparecerán como uniformes (debido a la profundidad de color limitada), pero los píxeles son completamente transparentes.
2. Use la solución IE PNG disponible aquí: http://git.twinhelix.com/cgit/iepngfix/ - abra index.html y lea los comentarios.
3. Animar el movimiento, pero no animar la opacidad de las imágenes PNG.
4. Condicionalmente, realice una o más de las anteriores utilizando ya sea pruebas de JavaScript, comentarios condicionales o la extensión de "comportamiento" de MSIE solo para CSS. Así es como algo de eso podría funcionar:

Comentarios condicionales:

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

En el CSS:

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

A través de la detección de JavaScript:

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

El comportamiento iepngfix.htc funciona al reemplazar el PNG con una imagen en blanco (blank.gif) y luego al usar las rutinas DXImageTransform de Microsoft para cargar el archivo PNG como un filtro en la imagen en blanco. Existen otros arreglos PNG que funcionan envolviendo cosas en divs o spans, pero esos a menudo romperán tu diseño, así que los evito.

Espero que esto ayude.

Answer 10

Oye, no sé si todavía estás buscando una respuesta. Hace un par de días tuve el mismo problema al animar un div con una imagen PNG adentro. Probé muchas soluciones y la única que funcionaba bien es una que codifiqué a mí mismo.

El problema parece ser que IE carece de soporte de opacidad y soporte PNG adecuado, por lo que rompe la visualización PNG después de aplicar un efecto de opacidad (creo que los marcos de animación dependen del filtro propietario de MSIE "AlphaImageLoader" para el efecto de opacidad en IE). Lo curioso (para mí que todavía no entiendo muy bien) es que este problema se puede resolver usando el mismo filtro para cargar la imagen antes de la animación.

Escribí un javascript simple que aplica el filtro a cada imagen con la extensión .PNG. Mis animaciones funcionan bien en IE con eso.

Copio el código a continuación. Es un framework independiente (es JavaScript puro), pero tienes que ponerlo dentro del evento listo para DOM de tu framework (o usar domready.js, como lo hice yo).

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === ''.png'' || imgSrc.substr(imgSrc.length-4) === ''.PNG'') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=''true'',sizingMethod=''crop'',src=''" + imgSrc + "'')";
        }
    }
}

Por favor, avíseme si funcionó bien para usted y si la animación se ejecutó sin problemas. ¡Saludos cordiales!

Answer 11

Tengo el mismo problema molesto con IE8 e IE7 ... ¿alguien ha probado si las soluciones de Cmc hacen el truco?

Mi url es http://www.onlinebrand.dk (El menú principal se desvanece, como Google :) Pero a IE no le importa).

EDITAR: Solo lo probé yo mismo, e incluso si configuré el ancho y la altura de, bien la repetición img. No funciona

Acabo de encontrar otro trabajo alrededor, donde Fadein una envoltura en lugar de la div con la imagen .png bg. Y funcionó, ahora obtengo algún tipo de transparencia en IE, pero también algo de relleno / margen ... Totalmente extraño ...

Bill Gates, ¿Qué pasa con esto? ¿Por qué no nos llevamos bien?

Answer 12

Use la unidad PNG Fix para png-24 semitransparente.

Answer 13

Utilicé esta función para cargar imágenes en el carrusel de la galería. Se basa en la respuesta anterior de Alejandro García Iglesias. Se deshizo del "halo negro" en IE 6 y 8.

function preloadImages(id) {
    var c = new Array();
    $(id+'' img'').each( function(j) {
        c[j] = new Image();
        c[j].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=''true'',sizingMethod=''image'',src=''"+ this.src +"'')"; 
        }
    });

}

Llamar así:

preloadImages(''#Stage'');

Answer 14

Utilizo un arreglo PNG modificado para IE6, funciona genial:

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                    var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                            imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                            src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''" + src + "'', sizingMethod=''" + sizingMethod + "'')";
                    if (isImg) this.src = emptyimg;
                    else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
    }
});
})(jQuery);

no te olvides de subir x.gif. (un gif transparente 1x1)