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 :(

Hi there, just wanted to say, I enjoyed this blog post.
It was practical. Keep on posting!

Clara says:

Every weekend i used to pay a visit this website, aas i
want enjoyment, since this this website conations truly good funny material too.

www. says:

About finding a call many folks in operation dream.

It happened to my friend–or rather at my buddy’s investment firm, Third Avenue Administration. 10 years
ago, this associate was involved of a planned
offer made with a company the company was invested in. He asked a series of questions
that were sharp together with the management team on a conference-call.

Traders and other professionals were on the call. And unbeknownst to everybody,
so was Buffett.

The affiliate was rung up by Buffett and left a voice mail after the call ended.
At first, he believed it was a prank call. He later confirmed it absolutely was truly the billionaire
creator of Berkshire Hathaway who had phoned to commend him for a few careful work
on the organization. Lesson learned: You never know
who’s listening or viewing what you do.

I was not so lucky. I needed to spend years attempting to get I to be
spoken to by Buffett. That was the mandate when I first joined Television–nab the first interview for the network with him.
And in my quest to accomplish that, I discovered a
couple of things about what is required to get anyone–even the entire world’s next richest person–to speak for you.

Great post however , I was wanting to know if you could write a litte more on this subject? I be very thankful if you could elaborate a little bit further. Bless you!