Los problemas más comunes de Internet Explorer

Basándome en la triste realidad de que Internet Explorer 6 aún sigue vivo, no importa cuánto me esfuerce en ignorarlo, y que mantiene una cuota de mercado superior al 15% entre la comunidad “geek1, 2 he decidido crear una pequeña recopilación de los problemas más comunes que Internet Explorer presenta a la hora de crear una página HTML.

Esta no pretende ser una “lista definitiva” de todos los bugs en IE6 sino más bien es un mini resumen, ya que como todos sabemos Internet Explorer 6 contiene hasta la fecha 32.642.321 bugs reportados y todos los dias se siguen reportando más :roll:

1. Transparencia PNG

El problema: Internet Explorer 6 y anteriores, muestran en color gris las transparencias de los archivos PNG.
Solución: Hay varias soluciones para este problema, la primera de ellas es usar el filtro de Microsoft:

img
{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Otra opción es usar el iepngfix.htc aunque personalmente no me dio buenos resultados, funciona bastante bien para construcciones sencillas.

Una alternativa con buenos resultados es el script DD_belatedPNG que teóricamente nos permite usar PNGs en backgrounds y en eventos hover.

2. Double Margin Bug

Problema: El margen izquierdo/derecho de un elemento flotante es duplicado.
Solución: Agregar display:inline a todos los elementos flotantes. Indispensable que esto se haga costumbre!

selector
{
  float:left;
  margin-left:10px;

  /* fix the double margin error */
  display:inline;
}

3. Bicubic Image Scaling

Problema: En Internet Explorer 7 las imágenes que intentemos achicar se verán pixeladas. Esto es debido a que la propiedad de escalado por el método bicubic está deshabilitada por defecto.
Solución: Debemos activarla nosotros desde nuestro CSS indicando que los elementos recibirán ese estilo:

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

4. Image Border in links

Esto no es un bug, pero hace doler la cabeza como si lo fuera. El problema es que las imagenes que están dentro de un enlace, se muestran con un borde azul feo. Con esto se lo quitamos:

a img
{
  border: none;
}

5. Empty element height bug

Problema: Elementos vacíos que tienen hasLayout obtienen altura mágicamente.
Solución: Agregar overflow:hidden al elemento.

selector
{
  background: blue;
  width: 100%;
  overflow: hidden;
  height: 0; /* For IE7 */
}

6. Sub-Hover Bug

Problema: No se aplican estilos a los elementos hijos cuando se los llama desde un :hover del padre.
Solución: Agregar zoom:1 al :hover

span
{
  display: none;
}

a:hover span
{
  display: inline;
  zoom:1;
}

7. Min-Height for IE

Problema: No se reconoce la propiedad min-height.
Solución: Aplicar height sólo a IE6.

selector
{
  min-height:500px;
  _height:500px;
}

Algunos consejos

  • Siempre usa un css reset
  • Todos los elementos flotantes deben tener display:inline y overflow:hidden
  • Cuando veas que algo desaparece mágicamente o no se posiciona como corresponde usa zoom:1 esto soluciona muchas cosas
  • La cuchara mágica siempre es un buen lugar para probar tu diseño

Continuará…

Si te quedaste con hambre, puedes consultar esta lista de bugs para Internet Explorer.

Personalmente sigo dando un mínimo soporte a IE, de tal manera en que el estilo del sitio se muestre bien y se pueda leer correctamente. Sin embargo efectos como border-radius, opacity, text-shadows, etc, no se ven bien en Internet Explorer pero eso no me quita el sueño.

PD: Pueden dejar un comentario acerca de lo que piensan sobre IE6. Las malas palabras son bienvenidas :roll:

drakoniano says:

aqui desahogando el desespero al encontrarme con el IE6 en algunos pcs menciono unos puntos que me sacan del asiento:

- IE6 no maneja las famosisimas y comodas pestañas
- IE6 siempre molesta por el cuadro de activacion de los swf.
- como menciono Eduardo, las transparencias de los png no las maneja, y en especial existen pcs que sea cual sea el png siempre muestra una capa azul traslucida encima del png.

por el momento no recuedo mas. saludos

esutoraiki says:

Es “El maligno”

Si la verdad es muy incomodo para nosotros que estamos constantemente en la web y hacemos pruebas de diseño con todos los exploradores, es fastidioso pero bueno ya la mayoria empieza a actualizarse y poco a poco van hacer mucho menos las personas que usen el ie6. :)
Excelentes articulos.
Saludos,

david says:

es un monstruo a extinguir

Ariadna says:

Creo que estamos malacostumbrando a los usuarios de ie6. Deberíamos hacer una cruzada de “no mas hacks para ie6″ que vean todo horrible para que actualicen su versión de iexplorer o cambien de navegador. Pierdo horas arreglando pequeños imperfectos en ie6 (mi jefe me obliga)… grgrgrgrgr

Manny says:

dejémonos de quejarnos, que de todas formas seguira ahi, y siempre que reviso las estadisticas de mi sitio siempre hay muchas de IE6, lo que nos queda es estar corrigiendo errores de IE6 y algunos pocos de IE7, ya que :(