5.1.1.

17 marzo 2005

Bug IE y Opera: margin-bottom, float y clear

Categoría

Para que no haya tendencias contra un único navegador, el bug en Internet Explorer involucrando margin-bottom, float y una caja no flotante también puede ser adaptado a Opera.

Repitiendo el esquema de tres DIVs, las diferencias son:

  • El segundo DIV puede tener cualquier ancho.
  • El tercer DIV debe tener definida la propiedad clear en la misma dirección en que el anterior elemento está flotando (o simplemente estar definida como both.
#uno {margin-bottom: 10px;}
#dos {float:left;}
#tres {clear:left;}

Pueden verlo funcionando en el ejemplo 1.

De esta forma el bug también se repite en Internet Explorer 5, 5.5 y 6. En Opera aparece en la versión 7.54, 7.23 y 8 beta 2 (por lo seguramente se extiende a todas las versiones 7). Opera 5.12 interpreta bien el ejemplo y seguramente las versiones 6. Por tal, sospecho que este es uno de los nuevos bugs que aparecieron con la reescritura completa del engine que hicieron para la versión 7.

Las soluciones para este bug se basan en evitar que el margen toque el elemento flotante.

Solución para Opera

Opción 1
Agregar un elemento de tipo bloque entre el margen del primer elemento y el elemento flotante. Ejemplo 2.
<div id="uno"> Elemento con margen inferior </div>

<div> <!-- elemento vacio --> </div>

<div id="dos"> Elemento flotante </div>
Opción 2
Encerrar el elemento flotante en un DIV (sin ninguna propiedad definida). Ejemplo 3.
Opción 3
Encerrar al elemento flotante y al siguiente (#dos y #tres) en un DIV (sin ninguna propiedad definida). Ejemplo 4.

Solución para Internet Explorer

Las soluciones que funcionan en Opera deben ser levemente modificadas para funcionar en Internet Explorer. En caso de usar cualquier de ellas, el nuevo DIV tener definida la propiedad height con un valor de 1% o 1px. Tené en cuenta de ocultar esa definición para los demás navegadores. Ejemplo 5, ejemplo 6 y ejemplo 7 respectivamente.

Powered by Blogger