Imágenes png transparentes en IE

El “amado” Internet Explorer, ese navegador que tantas horas de diversión nos ha dado, no soporta imágenes png transparentes en sus versiones inferiores a la 7 (¿me lo dices o me lo cuentas?). Y aunque algunos traten de ignorar ya a IE6, sigue siendo un porcentaje inmenso que no se puede ignorar (aunque le quedan par de años como mucho), al menos para aplicaciones y páginas Web públicas.

Este problema se puede resolver fácilmente con los behavior de IE, que básicamente es una forma de ejecutar código (javascript) asociado al selector css en cuestión.

Mediante el uso del filtro AlphaImageLoader podemos mostrar imágenes que tengan zonas transparentes. La forma para resolver el problema consiste en sobreescribir todas las imágenes png con una imagen gif transparente (los cuales si son soportados) y aplicarle este filtro con la imagen real que queríamos mostrar. Esto sería algo así como:

<img src="trans.gif" style="filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')" />

Todo esto lo podemos realizar únicamente añadiendo un behavior el cual hará todo de forma automática. El uso sería algo así como:

img {
   behavior: url("iepngfix.htc");
}

Podemos poner esto en un css específico para IE, usar unos condicionales y nos queda ya hasta elegante:

<!--[if lt IE 7]><link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Por lo que, en resumen, necesitaremos lo siguiente:

La imagen transparente gif podemos ponerla en cualquier lado de la aplicación si editamos el htc (o si definimos en javascript una variable tal que var blankSrc = “/foo/bar/trans.gif”;, pero mejor la otra opción).

Por cierto, otro hack, para IE, similar y realmente útil es este con el cual podemos usar la pseudo clase :hover en más elementos aparte de <a>.

Fuente

4 Thoughts on “Imágenes png transparentes en IE

  1. Muy bueno el informe. El único problema que encuentro es que no valida el css, ya que “behavior” no es un parámetro válido. También estuve usando iepngfix muy parecido a este, pero tengo el mismo problema de validación.
    saludos.

  2. Por eso el condicional, para que el resto de navegadores decentes no incluyan el css que no valida.

  3. Vaya, y me entero de esto ahora. A mi me hizo falta para el proyecto, pero al final lo apañé poniendo el blanco todos los fondos de las imágenes y fiesta (apaños varios para llegar a tiempo).

  4. Pingback: Bookmarks about Imagenes

Post Navigation