Uninstallme

Desarrollo front-end, estándares web, accesibilidad y más

Cuando forzamos el tamaño de una imagen mediante CSS reduciendo su ancho o alto original, nos encontramos con que Internet Explorer hace cosas feas. A falta de palabras para describirlo, nada mejor que una captura:

Captura de imágenes redimensionadas en Explorer 7

Imágenes redimensionadas en Explorer 7

En el blog de ZURB, que por cierto, me encanta, nos muestran un pequeño truco para suavizar las imágenes en Internet Explorer entre otras técnicas para mejorar la presentación visual en varios navegadores


img{-ms-interpolation-mode: bicubic;}

Este método no funciona en Internet Explorer 6, para el que proponen usar algo un poco más sucio que lo anterior:


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');

Afortunadamente, Internet Explorer 8 no tiene este problema.

Demo suavizado de imágenes (sólo para IE 7)

Actualización: script para aplicar el filtro a las imágenes redimensionadas

En este comentario proponen el uso de un pequeño script en jQuery para detectar si una imagen está redimensionada y en ese caso aplicarle el estilo correspondiente para IE 7 y el filtro para IE 6. De esta forma evitamos tener código no válido en la CSS y aplicamos estos estilos sólo a las imágenes que lo requieran. Ya que el código no aparece muy bien formateado en los comentarios, lo pego aquí.

Gracias por la aportación!

jQuery.each($('img'), function() {
   ancho_forzado = $(this).width();

   img = new Image();
   img.src = $(this).attr('src');
   ancho_real = img.width;

   if (ancho_forzado != ancho_real) {
      if ($.browser.version.substr(0,1) == '7') {
         this.style.msInterpolationMode = "bicubic";
      } else if ($.browser.version.substr(0,1) == '6') {
         $(this).attr('width', ancho_forzado);
         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')",
         this.runtimeStyle.paddingTop = this.height,
         this.runtimeStyle.height = 0;
      }
   }
});

2 Comentarios

Max-width para Internet Explorer 6 sólo con CSS

Por kcmr, el 21 de octubre de 2009 en Buenas ideas, CSS

Etiquetas: ,

En CSSPlay han publicado un método basado sólo en CSS válido, para emular el funcionamiento de la propiedad max-width de CSS en Internet Explorer 6.

Esta propiedad es útil para fijar un ancho máximo de página (bloque contenedor) en diseños fluidos, evitando que los bloques de texto sean demasiado largos y dificulten su lectura.

La solución quizá llega un poco tarde ahora que, ¡por fin!, el porcentaje de uso de IE 6 es menor que el de sus hermanos mayores, IE 7 y 8, y poco a poco vamos dejando de dar soporte (teniendo siempre en cuenta aquello de la degradación elegante) a este navegador.

La técnica varía según la alineación de página que se use. Para un contenedor centrado de 960 pixeles de ancho máximo, el código HTML y CSS a usar sería similar a este:

HTML

<div class="leftpad"></div>
<div class="rightpad"></div>
<div id="contenedor">
... bla bla bla ...
</div>

CSS

.leftpad{
width: 50%; float: left;
margin-right: -480px; height: 1px;
}
.rightpad{
width: 50%; float: right;
margin-left: -480px; height: 1px;
}
#contenedor{overflow: hidden;}
* html #contenedor{float: left;}
  • El alto de los bloques con el margen negativo debe ser una unidad. No funciona un porcentaje o el valor auto.
  • El margen negativo es igual a la mitad del ancho máximo del bloque contenedor, que no se declara en ningún otro sitio.

Existen otras soluciones para conseguir un ancho máximo en IE 6, basadas en Javascript o en el uso de expresiones propietarias de Microsoft.

5 Comentarios

IE Tester es un emulador de varias versiones de Internet Explorer cuya gran ventaja respecto a otros emuladores es la capacidad para emular IE 6 en Windows Vista.

Sin embargo tiene un pequeño problema con los PNG transparentes de 24 bits. Usemos el método que usemos para “corregir” el fallo de IE 6 con la transparencia de los PNG, si vemos una página que está en un servidor, por ejemplo un http://localhost, el PNG transparente desaparece. Esto mismo no ocurre si estamos viendo esa misma página alojada en otra ubicación, por ejemplo C:\loquesea…

Sigue leyendo esta entrada »

1 Comentario

Limpiar flotaciones: otro método más

Por kcmr, el 12 de septiembre de 2008 en CSS, Navegadores

Etiquetas: , , , , ,

Hace unos meses escribía una técnica para limpiar flotaciones en la que se usaba la propiedad display: inline-block para Internet Explorer 7. El problema de esta técnica es que se basa en un error de interpretación de este valor de la propiedad display en IE 7, por lo que pone en peligro la compatibilidad hacia adelante y obliga a usar filtros o hacks para este navegador en concreto.

Sigue leyendo esta entrada »

1 Comentario

IETester es una aplicación gratuita que emula varias versiones de Internet Explorer: 5, 6, 7 y 8 beta. Funciona en Windows Vista y XP y permite abrir un documento html en diferentes pestañas usando en cada una una versión distinta de Explorer.

La principal ventaja de IETester frente a Multiple IE, es que hace posible ver páginas emulado a Explorer 6 en Windows Vista, cosa que hasta el momento, si no me equivoco, sólo era posible instalando una máquina virtual como Virtual PC, en la que usar otro sistema operativo con Explorer 6 instalado.

Captura de IE Tester

Captura IETester

Actualización 25 noviembre 2008

La última versión de IE Tester, 0.2.3, viene con la segunda beta de Explorer 8 y vista previa de impresión.

Página de IETester con enlace a descarga.

9 Comentarios