Realizzando un layout css ci si scontra spesso con le limitazioni della versione 6 di Internet Explorer, limitazioni che vanno affrontate e risolte in quanto tale browser è ancora ad oggi molto diffuso.
Due limitazioni particolarmente insidiose sono il mancato supporto per le istruzioni min-height / min-width e max-height / max-width, che possono essere facilmente risolte con due diverse tecniche.
min-height / min-width
Consideriamo il seguente esempio:
min-height: 150px;
Il problema si risolve riscrivendo il frammento in questo modo:
height: auto !important;
height: 600px;
min-height: 600px;
Il trucco funziona perché in questo modo per Internet Explorer 6 l’unica riga valida delle tre è la seconda - che gli da una height fissa dalla quale è in grado di sforare se il contenuto lo forzerà, simulando così l’effetto min-height - mentre per tutti gli altri browser – che supportando la direttiva !important – le righe valide saranno la prima e la terza, che ci garantiscono l’effetto desiderato.
max-width / max-height
Per l’accoppiata max-width / max-height dobbiamo invece usare un’altra tecnica che sfrutta la capacità di explorer 6 di applicare delle espressioni javascript ai fogli stile.
Consideriamo il seguente esempio:
max-width:230px;
Il problema si risolve riscrivendo il frammento in questo modo:
max-width:230px;
width: expression(this.width > 230 ? 230:true);
In pratica per tutti I browser che non supportano le espressioni l’unica riga valida sarà la prima, mentre per ie6 l’unica riga valida è la seconda che non è altro che la versione javascript della direttiva max-width.