Uninstallme

Hace unos meses escribía una técnica para limpiar flotaciones en la que se usaba la propiedad display: inline-block para Internet Explorer 7. El problema de esta técnica es que se basa en un error de interpretación de este valor de la propiedad display en IE 7, por lo que pone en peligro la compatibilidad hacia adelante y obliga a usar filtros o hacks para este navegador en concreto.

Consultando hoy las formas posibles de dar layout a un elemento en Internet Explorer en On having layout, he encontrado una forma mucho más inofensiva y fácil de recordar con la que no es necesario usar selectores (filtros) específicos para un navegador u otro.

Suponiendo que usamos una clase “clearfix”, el código sería este:

Para Firefox y Explorer 8 que ya soporta el pseudo elemento :after y la propiedad content:

.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;}

min-height para Internet Explorer 7 y height para Internet Explorer 6. Al ser el valor de min-height 0, resulta inofensivo para otros navegadores:

.clearfix{min-height: 0; height: 0;}

Para todos los navegadores que interpretan la propiedad height corréctamente, es decir, todos menos Internet Explorer 6:

html>body .clearfix{height: auto;}

Todo junto:

.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix{min-height: 0; height: 0;}
html>body .clearfix{height: auto;}

¿Que por qué no uso simplemente overflow: hidden? La respuesta es que suele provocar un efecto bastate feo en Firefox 2 (en la última versión ya no pasa) por el que todo el texto de la página queda seleccionado al hacer click sobre una zona vacía a la izquierda del bloque contenedor principal, puede provocar que capas emergentes sobre elementos con overflow: hidden aparezcan cortadas e impide utilizar un alto mínimo en Internet Explorer 6 sin tener que hacer más arreglos adicionales. Vaya, que da algún que otro problema.