Problemas de IE6 con PNG transparentes

StackOverflow https://stackoverflow.com/questions/130161

Pregunta

Me he acostumbrado a la idea de que si quiero / necesito usar PNG alfa-trans de manera cruzada con el navegador, que uso una imagen de fondo en un div y luego, en CSS solo para IE6, marque fondo como " ninguno " e incluye el " filtro " adecuado argumento.

¿Hay otra manera? ¿Una mejor manera? ¿Hay alguna forma de hacer esto con la etiqueta img y no con imágenes de fondo?

¿Fue útil?

Solución

La línea de fondo es, si quieres una transparencia alfa en un PNG, y quieres que funcione en IE6, entonces debes aplicar el filtro AlphaImageLoader.

Ahora, hay muchas formas de hacerlo: hacks específicos del navegador, comentarios condicionales, Javascript / JQuery / JLibraryOfChoice, iteración de elementos, servidor de CSS del lado del servidor a través de UserAgent-sniffing ...

Pero todos ellos han llegado a tener el filtro aplicado y el fondo eliminado.

Otros consejos

Aquí hay una solución específica que me gusta, usando Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

Es fácil de agregar a un sitio existente, maneja todo tipo de imágenes (botones de formulario, fondos, etiquetas IMG regulares, etc.) y deja su CSS agradable y limpio.

Lo más probable es que sea el " mejor " camino. Pero tenga en cuenta que no es solo alpha-trans que IE6 no se implementa 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 se muestran "más oscuros" de lo que deberían.
Una alternativa " solución " que implementamos en un proyecto reciente fue marcar cada imagen png con un " toGif " clase, en el CSS del que se llama un comportamiento personalizado .htc que cambia la extensión .png a .gif si se detecta que el navegador es uno que hemos marcado como un problema. Simplemente incluimos una versión GIF de cada PNG a su lado 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 combinación alfa en favor de la transparencia total garantizada y la precisión del color, y solo lo hacemos cuando sabemos que probablemente no se verá como está. Puede que no sea una solución ideal, pero supongo que es la naturaleza del navegador cruzado.
Edit: En realidad, ahora que veo el proyecto en cuestión, usamos un comportamiento .htc para una clase img llamada " alpha " También que arroja el filtro correcto sobre la imagen automáticamente. Así que estás detectando que el navegador usa javascript en lugar de un hack de CSS puro solo para IE6, por lo que podría ser un poco más elegante ... pero básicamente es lo mismo.
Para obtener una introducción a cómo escribir comportamientos DHTML, intente este enlace .

El cargador de imágenes es la única solución disponible para IE6. Tenga en cuenta que la compatibilidad con PNG es muy rudimentaria (junto con IE7 también) y no puede manejar correctamente fondos transparentes en bucle. Aprendí esto de la manera difícil al intentar diseñar un sitio web con un contenedor transparente. Funcionó perfectamente en Firefox, por supuesto.

La solución debería estar bien para áreas pequeñas de fondo y cualquier gráfico de primer plano transparente, pero una vez más, aconsejaría no diseñar un sitio web que use 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. Afortunadamente, no lastimé demasiado el diseño al final.

Otra forma de evitar esto es utilizar 2 imágenes separadas, por ejemplo, un GIF y un PNG transparente, y apuntar tu 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 los selectores secundarios de CSS, por lo que ignorará la regla, mientras que los navegadores que lo entiendan te darán un bonito PNG transparente.

El único inconveniente es que tiene que tener dos imágenes separadas y el diseño podría no parecer exactamente el mismo navegador cruzado, pero siempre que no parezca roto, debería estar bien. p>

Aquí hay 2 opciones que no usan el filtro AlphaImageLoader.

Para mí, si no es posible enviar un archivo .gif con mate a IE6, uso Fireworks para agregar una paleta compatible con IE6 al .PNG .

La solución habitual para los elementos img es cambiar el src para que apunte a un GIF transparente de 1x1 píxeles y luego usar el mismo filtro de filtro.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top