Utilizzare l'attributo min-height in Internet Explorer
by Michele Cotrufo m.cotrufo@email.it

Tra le tante proprietà CSS non supportate da Internet Explorer ce n'è una molto importante, la proprietà min-height.

Questa permette di stabilire l'altezza minima di un box, che sarà poi espandibile a seconda dei contenuti. Come detto prima, IE non la supporta e ciò rappresenta una grave mancanza, data l'utilità di questa proprietà.

Fortunatamente per noi, IE ha un altro problema, ovvero quello di non supportare l'operatore !important.
Questo operatore, post-fisso a una proprietà, indica che questa sovrascriverà le altre proprietà con lo stesso nome. Per fare un esempio:

width: 10px !important;
width: 5px;

In questo caso alla proprietà width sarà assegnato 10 px, in quanto contrassegnato da !important. Questo però non succede in IE.

Un altra "stranezza" di IE è che l'attributo height viene interpretato come min-height, ovvero assegnando un valore a height il box avrà quell altezza come minima, e si potrà espandere.

A questo punto ci si potrebbe chiedere: non basta usare height al posto di min-height per risolvere il problema? NO, perchè usare height per l'altezza minima funziona solo con IE e non con molti altri browser, che invece interpretano height come altezza assoluta, non espandibile. Noi invece vogliamo creare un foglio di stile valido per la maggior parte dei browser in uso.

Ecco come procedere:

.box{
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

Assegnando questa classe a un box, questo avrà l'altezza minima sia in IE che in altri browser.
Come funziona?

Mettiamo che questo foglio di stile si interpretato da IE. Il browser leggerà min-height: 100px; ma dato che nn supporta la proprietà min-height, questa riga non significherà nulla per lui. Poi passa alla successiva, e assegna ad height il valore auto. Dato che nn riconosce l operatore !important, assegnerà di nuovo un valore a height, ovvero 100px. Ma come detto prima, per IE l'attributo height rappresenta l'altezza minima espandibile! Perciò questo foglio di stile funzionerà con IE

Passiamo ad un altro browser che riconosce min-height e !important (praticamente tutti...)

Leggendo min-height: 100px; assegnerà 100px a min-height. La seconda riga, grazie all'attributo !important, sovrascrive la terza impedendo che l'altezza assoluta del box sia impostata a 100px. In questo modo l'altezza minima espandibile del box sarà sempre 100px !

In questo modo quindi, questo CSS funzionera per tutti i browser!