9 errores de IE más comunes y cómo solucionarlos

Spanish (Español) translation by Steven (you can also view the original English article)

Internet Explorer: La pesadilla de la mayoría de los desarrolladores web. Hasta el 60% de tu desarrollo puede desperdiciarse simplemente tratando de eliminar errores específicos de IE, lo que no es realmente un uso productivo de tu tiempo. En este tutorial, aprenderás sobre los errores de IE más comunes y las disparidades de representación y cómo eliminarlos o tratarlos fácilmente.

Por cierto, si no deseas pasar por este proceso tú mismo, o si tienes problemas para solucionar un error de IE en particular, prueba el servicio de corrección de problemas del navegador IE en Envato Studio.

IE Browser Issue Correction service on Envato Studio — Servicio de corrección de problemas del navegador IE en Envato Studio

Alternativamente, puedes encontrar útil este artículo de Envato Market: Detección de navegador fácil y rápida. Te permite determinar rápidamente qué navegador se está utilizando y mostrar notificaciones o realizar otras acciones en función de eso.

Easy Quick Browser Detection — Detección de navegador fácil y rápida

1. Centrando un diseño

Centrar un elemento es probablemente algo que todo desarrollador web tiene que hacer al crear un diseño. La forma más fácil y versátil de centrar un elemento es simplemente agregar margin: auto; al elemento relevante. El método anterior se encargará de centrar el elemento independientemente de la resolución y/o el ancho del navegador. IE 6 en modo peculiar, sin embargo, decide manejar esto de la manera más desafortunada posible: no manejándolo en absoluto.

Considera el siguiente código:

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;
	
}

El resultado que esperarías:

Pero lo que IE realmente te ofrece:

Esto se debe principalmente a que IE6 en modo peculiar y a continuación no reconoce el valor auto que establecimos en la propiedad margin. Afortunadamente, esto se soluciona fácilmente.

La solución

La forma más fácil y confiable de centrar el contenido para IE6 y a continuación es aplicar text-align: center al elemento principal y luego aplicar text-align: left al elemento que se va a centrar para asegurarte de que el texto dentro de él esté alineado correctamente.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;
	
}

2. Efecto escalera

Casi todos los desarrolladores web utilizan listas para crear su navegación. Por lo general, el desarrollador crea el elemento contenedor, crea algunos enlaces en el interior y luego hace flotar los anclajes en la dirección que él quiere y termina. Por lo general. IE, sin embargo, decide hacerlo mucho más complicado. Examina el siguiente código:

1	<ul>
2	<li><a href="#"></a></li>
3	<li><a href="#"></a></li>
4	<li><a href="#"></a></li>
5	</ul>

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

Un navegador compatible con el estándar lo muestra así:

Y la captura de pantalla de IE:

No es una navegación particularmente agradable si me preguntas. Afortunadamente, hay 2 soluciones que puedes probar.

Solución #1

La forma más fácil de combatir esto es hacer flotar los elementos li en lugar de los elementos de anclaje. Solo agrega esto y ya habrás terminado.

1	ul li {
2	float: left;
3	}

Solución #2

La segunda forma es aplicar display: inline al elemento li circundante. Además de corregir este error, también corrige el error de doble margen que se menciona a continuación. Sin embargo, a los puristas puede que no les guste colocar elementos de bloque dentro de elementos en línea.

1	ul li {
2	display: inline
3	}

3. Margen doble en elementos flotantes

Este error es probablemente uno de los primeros con los que se encontrará un desarrollador web principiante y es específico de Internet Explorer 6 y versiones anteriores. Solucionarlo es tan simple como hacer flotar un elemento y luego aplicar un margen en la dirección en que se ha flotado. ¡Y voilá! El margen se duplicará en la salida renderizada. Realmente no es algo que esperarías al crear un diseño perfecto de píxeles.

Considera este código:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

En los navegadores que cumplen con los estándares, así es como se ve:

Pero así es como IE 6 decide renderizarlo:

La solución

La solución para este error específico es aplicar display: inline al elemento flotante y todo funciona como se supone que debe hacerlo. Nuestro código anterior ahora cambia a:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

4. Incapacidad para tener elementos con alturas pequeñas

Como parte de la creación de un diseño, es posible que debas crear elementos con alturas muy pequeñas como bordes personalizados para elementos. Por lo general, solo tendrás que agregar height: XXpx a las declaraciones del estilo y deberías haber terminado. O eso pensaba. Revisa la página en IE y probablemente harás una doble toma.

Como ejemplo, observa el siguiente código:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;	
	margin: 30px 0;
}

Y el resultado es el esperado: un elemento de 2px con un borde de 1px.

Y en IE:

Solución #1

La causa de este error es bastante simple: IE simplemente se niega a dimensionar un elemento más pequeño que el tamaño de fuente establecido. Simplemente establecer el tamaño de fuente en 0 te permite tener un elemento tan pequeño y corto como desees.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;	
	margin: 30px 0;
    	font-size: 0;
}

Solución #2

La siguiente mejor manera de lidiar con este error es aplicar overflow: hidden al elemento para que colapse a la altura deseada.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;	
	margin: 30px 0;
    	overflow: hidden
}

5. Desbordamiento automático y elementos en posición relativa

Este error asoma su fea cabeza cuando en un diseño estableces la propiedad overflow del contenedor principal en auto y colocas un elemento relativamente posicionado dentro de él. El elemento relativamente posicionado viola los límites de su elemento padre y se desborda hacia el exterior. Déjame demostrarte. Mira el siguiente código:

1	<div id="element"><div id="anotherelement"></div></div>

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;	
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;	
	position: relative;
	margin: 30px;
}

Y el resultado esperado:

Y el resultado de IE:

La solución

La forma más fácil de solucionar este molesto error es colocar el elemento padre de manera relativa.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;	
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

6. Reparación del modelo de caja rota

La mala interpretación de Internet Explorer del modelo de caja es quizás su error imperdonable. IE 6 en el modo semi-compatible con los estándares evita esto, pero este problema aún puede desencadenarse por el modo peculiar.

Dos elementos div. Uno con el arreglo aplicado y otro sin él. La diferencia de ancho y alto es la suma del relleno aplicado en cada lado.

La solución

Estoy seguro de que el dilema con el modelo de caja no necesita explicación ni demostración, así que solo te daré la solución.

El truco consiste en establecer el ancho normalmente para todos los navegadores que cumplen con los estándares, apuntar solo a IE5/6 y luego alimentarlo con el ancho corregido. Así es como normalmente se hace:

#element{
	width: 400px;
    	height: 150px;	
	padding: 50px;
}

Esto ahora cambia a:

1	#element {
2	width: 400px;
3	height: 150px;
4	\height: 250px;
5	\width: 500px
6	}

Esencialmente, agrega el relleno al ancho original y lo alimenta a IE 6. La corrección apunta a IE 6 solo en modo peculiar, por lo que no debes preocuparte de que IE 6 en modo normal estropee las cosas.

7. Establecer un ancho y un alto mínimos

Establecer una altura mínima para un elemento es absolutamente imperativo cuando se trata de convertir un hermoso diseño en un diseño perfecto en píxeles. Desafortunadamente, IE ignora por completo la propiedad min-height en lugar de tomar la altura declarada como la altura mínima.

Solución #1

La solución es un truco creado por Dustin Diaz. Utiliza la declaración !important para que funcione. El fragmento se ve así:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Solución #2

La segunda forma es aprovechar el hecho de que IE no puede analizar los selectores secundarios.

#element {
    min-height: 150px; 
    height: 150px;
}
   
html>body #element { 
	height: auto;
}

8. Mal comportamiento del diseño flotante

Uno de los conceptos importantes de la creación de diseños sin tablas utilizando CSS son los elementos flotantes. En la mayoría de los casos, IE6 maneja esto con aplomo pero en ciertos casos falla. Cuando te enfrentas a contenido irrompible o elementos cuyo ancho excede el ancho de su padre, causas estragos en los diseños. Deja que te enseñe.

Considera este fragmento de código:

1	<div id="container">
2	<div id="element">http://net.tutsplus.com/</div>
3	<div id="anotherelement"></div>
4	</div>

#element, #anotherelement{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 100px;
	height: 150px;	
	margin: 30px;
	padding: 10px;
	float: left;
}

#container{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;	
	margin: 30px;
	padding: 5px;
	overflow: auto;
}

El resultado esperado como se ve en un navegador compatible con los estándares:

En IE:

Como puedes ver, el primer div se expande para adaptarse al contenido, lo que finalmente rompe el diseño.

La solución

No existe una solución elegante para este error. La única forma de guardar el diseño es aplicar overflow: hidden al elemento pero a costa de recortar el contenido irrompible. El diseño se guardará, pero el contenido adicional no.

#element{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;	
	margin: 30px;
	padding: 5px;
	overflow: hidden;
}

9. Espaciado entre elementos de la lista

IE 6 agrega espaciado vertical e incluso no se especifica ninguno en casos específicos. Primero veamos el código.

1	<ul>
2	<li><a href="#">Link 1</a></li>
3	<li><a href="#">Link 2</a></li>
4	<li><a href="#">Link 3</a></li>
5	</ul>

ul {
	margin:0; 
	padding:0; 
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

Cómo debería verse:

Lo que nos da IE:

Afortunadamente, hay una gran cantidad de soluciones que puedes probar.

Solución #1

La forma más fácil de salir es simplemente definir un ancho para las etiquetas de anclaje y ¡listo! todo funciona como debería. Declarar un ancho activa la propiedad hasLayout específica de IE del elemento. En su lugar, podrías definir una altura si lo deseas.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Solución #2

El siguiente método es simplemente hacer flotar el ancla a la izquierda y luego limpiarla.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Solución #3

El tercer método es agregar display: inline al elemento li adjunto. Esto también corrige el error de doble margen como se indicó anteriormente.

1	li {
2	display: inline;
3	}

Conclusión

Y ahí lo tienes: los nueve errores de renderizado de IE más comunes y cómo solucionarlos. Con suerte, esto te ha ahorrado algo de sangre, sudor y lágrimas mientras depurabas tu próxima creación. Estaré viendo la sección de comentarios con frecuencia; así que déjame uno si tienes dificultades para implementar las correcciones indicadas previamente.

¿Preguntas?, ¿cosas bonitas que decir?, ¿críticas? Presiona en la sección de comentarios y déjame un comentario. ¡Feliz codificación!

Síguenos en Twitter o suscríbete al feed RSS de Tuts+ para obtener los mejores tutoriales de desarrollo web en la web.

Recursos adicionales

Si estás cansado de arrancarte los pelos debido a errores confusos, consulta Envato Studio, donde puedes pedir ayuda a desarrolladores seleccionados que aman eliminar errores y hacer correcciones.