Internet Explorer 6 y display:inline

Blog

Blog sobre programación y diseño en la web

Internet Explorer 6 y display:inline

De todos es conocido el quebradero de cabeza que supone adaptar nuestras webs a Internet Explorer 6. Todos tenemos nuestros trucos para intentar aliviar lo máximo posible las diferencias entre este navegador y los demás. Sin duda mi favorito es asignar en la hoja de estilo alternativa para este navegador la instrucción de CSS display: inline a todos los elementos a los que hayamos asignado un float y un margen.

Supongamos que asignamos un float a un elemento con un margen, por ejemplo:

.elemento {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 100px;
  /* Aplicamos 100px al margen izquierdo */
  }

El problema es que mientras con todos los navegadores el margen izquierdo que en este caso hemos establecido en 100px será el esperado, con Internet Explorer 6 el margen será el doble, es decir 200px.

Pero si añadimos display: inline el problema está solucionado:

.elemento {
  display: inline;
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 100px;
  /* Aplicamos 100px al margen izquierdo */
  }

Este es un viejo truco, conocido hace tiempo, pero que estoy utilizando ahora con bastante frecuencia en una web que estoy haciendo. Por ello pensé que sería interesante recordarlo mientras esperamos a que Internet Explorer 6 desaparezca para siempre de nuestras vidas…….

Escribir un comentario

Clic para cancelar respuesta.

XHTML: Puedes usar estos códigos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">