Anónimo
Limpieza de floats en Internet Explorer 7
por obokaman
Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CSS que tendría su nuevo navegador, Internet Explorer 7 . Después de unos 5 años sin publicar una nueva versión, parecía que la cosa iba a salir "fina": El modelo de caja se ha implementado correctamente, se soportan propiedades tan útiles como min/max-width, ... ¿¡Se acabaron las reglas sólo para IE!? No...
Por poner un ejemplo, no se han implementado los pseudo-elementos :before y :after. ¿Trivial? Para nada. Entre otros muchos usos, como la inclusión de elementos que afecten a la presentación de ciertos bloques ( comillas antes y después de elementos cite, pipelines después de listas de enlaces horizontales... ) o la limpieza de floats a través del easy clearing method quedan totalmente inutilizada.
El antiguo hack para explorer es ignorado por el nuevo IE y además, al carecer éste de soporte para :before, tampoco la regla genérica funciona. Esto se traduce en un montón de sitios descuajeringados: el anterior método permitía que aquellos contenedores que tuvieran hijos flotantes obtuvieran una altura correcta, correspondiente a su hijo más alto.
Cuando ya había perdido toda esperanza de disponer, de nuevo, de un método lo más genérico posible que permitiera disponer de un marcado "limpio" para conseguir el deseado efecto... me encontré con el artículo de Roger Johansson, New clearing method needed for IE7?, en que justo se plantea esto mismo, y en el que, a través de la discusión generada por sus lectores, consigue llegar a una versión funcional para IE y que hace uso exclusivamente de CSS.
La solución:
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
Con un pequeño añadido para IE 6, que se podría implementar de esta forma:
Información adicional:
¿Te pareció interesante este mensaje?
