para imagenes gratis galeria everywhere carrusel awesome html css internet-explorer-6 png

html - imagenes - Problemas de IE6 con PNG transparentes



slider prestashop 1.7 free (7)

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 normales, etc.) y deja su CSS limpio y agradable.

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 CSS solo IE6, marque el fondo como " ninguno "e incluye el argumento" filtro "adecuado.

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

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 solución debería estar bien para áreas pequeñas de fondo y cualquier gráfico de primer plano transparente, pero de nuevo desaconsejaría 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.

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 navegador es detectado como 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, pruebe este enlace .

La conclusión es que si quieres transparencia alfa en un PNG y quieres que funcione en IE6, entonces necesitas aplicar el filtro AlphaImageLoader.

Ahora, existen numerosas formas de hacerlo: hacks específicos del navegador, comentarios condicionales, iteración del elemento Javascript / JQuery / JLibraryOfChoice, servicio CSS del servidor vía UserAgent-sniffing ...

Pero todos se reducen a aplicar el filtro y eliminar el fondo.

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 hack.

Otra forma de evitar esto es usar 2 imágenes separadas, por ejemplo, un GIF y un PNG transparente, y apuntar a 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 los selectores de elementos secundarios de CSS, por lo que ignorará la regla, mientras que los navegadores que sí lo entienden le proporcionarán un bonito PNG transparente.

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