Alcuni mesi fa Nicholas Gallagher ha pubblicato un interessante articolo sul contenimento dei float in Internet Explorer 7 e 6. L'articolo introduce una tecnica del tutto nuova che fa uso delle espressioni dinamiche di Internet Explorer. Vediamola insieme.
Il codice è il seguente:
#test {
zoom:expression(this.runtimeStyle.zoom="1",this.innerHTML+='<br\ style="clear:both;font:0/0">');
}
La soluzione fa uso della proprietà zoom (supportata solo da IE) unita ad un'espressione dinamica di scripting che inserisce un elemento br vuoto a cui è stato applicato il clear all'interno del genitore dei float.
La proprietà zoom viene usata in questo caso per dare layout all'elemento. Si noti, tuttavia, che questa proprietà renderà non valido il nostro CSS qualora venisse usata insieme al resto del codice.
Interessante è l'annullamento delle dimensioni dell'elemento br tramite l'azzeramento della dimensione del font e dell'interlinea. La spiegazione è semplice: questo elemento contiene in realtà un carattere invisibile di interruzione di riga (\n), che può venire annullato solo operando sul font e l'interlinea.
Alcuni browser standard sono addirittura suscettibili alla seguente regola:
br:after {
content: none;
}
ma solo in alcuni casi, come per esempio nel layout di documenti XML. In definitiva, si tratta di una soluzione interessante, a patto di tenere a mente i problemi inerenti la validazione.