Me he acostumbrado a la idea de que si quiero/necesito usar PNG alfa-trans de forma cruzada, utilizo una imagen de fondo en un div y luego, en IE6- solo CSS, marque el fondo como "ninguno" e incluya el argumento "filtro" adecuado.Problemas de IE6 con PNG transparentes
¿Hay alguna otra manera? ¿Una mejor manera? ¿Hay alguna manera de hacer esto con la etiqueta img y no con imágenes de fondo?
La conclusión es que si desea transparencia alfa en un archivo PNG y desea que funcione en IE6, debe tener aplicado el filtro AlphaImageLoader.
Ahora, hay muchas maneras de hacerlo: los cortes específicos de navegador, Comentarios condicionales, Javascript/jQuery/JLibraryOfChoice elemento iteración, CSS-servicio a través de agente de usuario detectores del lado del servidor ...
pero todos ' se reduce a aplicar el filtro y eliminar el fondo.
La solución habitual para los elementos img es cambiar el src para apuntar a un GIF transparente de 1x1 píxeles y luego usar el mismo filtro hack.
Esa es probablemente la "mejor" manera. Pero tenga en cuenta que IE6 no implementa alfabéticamente correctamente cuando se trata de archivos PNG; el espacio de color está dañado debido a que IE no implementa la gamma correctamente y, por lo tanto, los archivos PNG a menudo muestran "más oscuro" de lo que deberían.
Una "solución" alternativa que implementamos en un proyecto reciente era marcar cada imagen png con una clase "toGif", en el CSS del que se llama un comportamiento personalizado .htc que cambia la extensión .png a .gif si el Se ha detectado que el navegador es uno que hemos marcado como problema. Solo incluimos una versión GIF de cada PNG junto a ella en la misma ruta, y si se encuentra que el navegador no maneja los PNG correctamente, lo intercambia con una versión GIF de la imagen. Por lo tanto, sacrificamos la mezcla alfa a favor de la transparencia total garantizada y la precisión del color, y solo lo hacemos cuando sabemos que probablemente no se verá bien tal como está.
Puede que no sea una solución ideal, pero supongo que es la naturaleza del navegador cruzado.
Editar: En realidad, ahora que veo el proyecto en cuestión, usamos un comportamiento .htc para una clase de img llamada "alpha" que arroja el filtro correcto sobre la imagen automáticamente. Entonces, estás detectando el navegador usando javascript en lugar de un hack CSS puro solo para IE6, por lo que podría ser un poco más elegante ... pero básicamente es lo mismo.
Para una introducción a cómo escribir comportamientos DHTML, intente this link.
Aquí es una solución específica que me gusta, usando Javascript (jQuery):
http://jquery.andreaseberhard.de/pngFix/
Es fácil de añadir a un sitio existente, se ocupa de todo tipo de imágenes (botones de formulario, fondos, las etiquetas IMG regulares, etc.), y deja su CSS agradable y limpio.
El cargador de imágenes es la única solución disponible para IE6. Tenga en cuenta que su compatibilidad con PNG es muy rudimentaria (junto con IE7, también) y no puede manejar correctamente los fondos transparentes en bucle. Aprendí esto de la peor manera cuando intento diseñar un sitio web con un contenedor transparente. Funcionó perfectamente en Firefox, por supuesto.
La corrección debería estar bien para áreas pequeñas de fondo y cualquier gráfico de primer plano transparente, pero de nuevo desaconsejaré diseñar un sitio web que utilice grandes cantidades de transparencia con Internet Explorer.
Al final mi solución fue mostrar un color plano para IE, pero conservé la transparencia para los otros navegadores. Al final no dañé mucho el diseño, afortunadamente.
Otra forma de evitar esto es usar 2 imágenes separadas, por ejemplo, un GIF y PNG transparente y orientar su CSS en consecuencia:
/* for IE 6 */
#banner {
background:url(../images/banner.gif);
}
/* for other browsers */
html > #banner {
background:url(../images/banner.png);
}
IE 6 no entiende selectores CSS niño por lo ignorará la regla, mientras que los navegadores que sí lo entienden te darán un bonito PNG transparente.
El único inconveniente es que debe tener dos imágenes separadas y el diseño puede no parecer exactamente el mismo navegador cruzado, pero siempre que no parezca roto, debería estar bien.
Aquí hay 2 opciones que no usan el filtro AlphaImageLoader.
Para mí, si el envío de un enmarañado .gif a IE6 no sólo es factible, yo uso Fireworks to add an IE6-friendly palette to the .PNG.
O ... tome la versión PNG-24 y páselo a través de algo así como pngquant para convertirlo en un PNG-8 con una transparencia perfecta. Nota: Photoshop (aunque algunos pueden asociarlo con PNG) es incapaz de guardarlos con la transparencia adecuada; pero el PNG-8 es capaz de tener una transparencia perfecta. A diferencia de PNG-24, en IE PNG-8 simplemente hará la transición a un estado estándar tipo GIF con un canal alfa de 1 bit. En otras palabras, los bits translúcidos se vuelven 100% transparentes, lo cual es una muy buena transición. – srcspider
enlace de actualización: http://pngquant.org/ – StefanNch