Internet explorer hacks
28/05/2011Nelle regole CSS min-height stabilisce l'altezza minima di un box e prevede che il box possa poi espandersi oltre l'altezza specificata.
Internet Explorer fino alla versione 6 non lo supporta, come neppure l'operatore !important (!important permette ad una regola di sovrascrivere regole che la seguono).
Nei CSS con height: invece se i contenuti di un dato box occupano uno spazio verticale inferiore a quello specificato per la proprietà height, allora il box ha l'altezza specificata, se invece i contenuti eccedono lo spazio a loro disposizione, allora Internet Explorer ignora l'altezza specificata e fa espandere il box. Diversamente, Opera, Mozilla e gli altri browser non espanderanno il box che non sarà più in grado di impaginare i contenuti.
La classica soluzione di implementazione di min-height su tutti i browser è questa:
.box {
min-height: 200px;
height: auto !important;
height: 200px;
}
La prima dichiarazione non è interpetata da Internet Explorer.
La seconda dichiarazione serve per Opera, Mozilla e gli altri browser per sovrascrivere la terza dichiarazione che vincolerebbe in ogni caso l'altezza del box (cosa non prevista da min-height). Internet Explorer ignora la direttiva !important.
La terza dichiarazione è interpretata solo da Internet Explorer poiché per gli altri browser la seconda dichiarazione è più importante.
Quindi Internet Explorer intepreterà height come se si trattasse di min-height!