Implementare min-height anche su Internet Explorer
Internet Explorer, nonostante i grossi passi avanti fatti dalla versione 6.0 rispetto alla versione 5.x, ha ancora diversi problemi nel supporto di molte, troppe, proprietà dei CSS.
Una delle proprietà più utili a non essere supportate è min-height.
Questa proprietà stabilisce l'altezza minima di un box e prevede che il box possa poi espandersi oltre l'altezza specificata. Le possibilità di applicazione sono molteplici, dunque il limite di Internet Explorer è piuttosto grave.
Per fortuna, un'altra incapacità del browser Microsoft fornisce una soluzione al problema: Internet Explorer non supporta l'operatore !important (maggiori dettagli sull'operatore !important sono disponibili sul sito del W3C).
Senza entrare in dettagli, si può semplicemente dire che l'operatore !important permette ad una regola di sovrascrivere regole che la seguono, ma Internet Explorer ignora questo principio e si comporta come se l'operatore !important non esistesse.
Un altro aspetto peculiare di Internet Explorer che può essere usato per ovviare al mancato supporto della proprietà min-height è rappresentato dal fatto che Internet Explorer intepreta height come se si trattasse di min-height: 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 soluzione
Sfuttando i due difetti di interpretazione precedentemente esposti, è possibile ottenere l'implementazione di min-height su tutti i browser.
Il codice da utilizzare è il seguente:
.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 non dà peso alla direttiva !important.
La terza dichiarazione è interpretata solo da Internet Explorer poiché per gli altri browser la seconda dichiarazione è più importante. In ogni caso Internet Explorer intepreterà height come se si trattasse di min-height.
E' disponibile un semplice esempio.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
