Internet Explorer 6 y display:inline

Estás aquí: Inicio › Blog › 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:

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8

.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…….

Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.

Artículos relacionados

• No se han encontrado artículos relacionados