Forse non tutti sanno che tra i suoi bachi Internet Explorer annovera il mancato supporto di min-height, min-width, max-height e max-width.
Questo è un grosso impedimento per me che sviluppo layout ridimensionabili, liquidi o fluidi.
Già normalmente comunque uso almeno un file CSS per sovrascrivere le regole che IE non gestisce correttamente.
Cominciamo dal più semplice.
Implementare min-height anche su Internet Explorer
La soluzione più semplice è stata spiegata (non se anche trovata o inventata) da Gianluca Troiani ed è nata dall'osservazione di come IE si comporta.
Internet Explorer interpreta height come se si trattasse di min-height.
Basta quindi servire solo a IE un valore dell'altezza pari al valore dell'altezza minima che serviamo agli altri browsers.
Per servire solo a IE una regola CSS le strade sono molte... Gianluca nel suo articolo sfrutta un altro baco di IE: il mancato supporto di !important.
Io normalmente per servire a IE regole particolari uso (sfruttando un altro baco ancora) * html.
Basta infatti anteporre * html al selettore CSS perchè la regola in questione venga presa in considerazione solo da IE.
Implementare max-width e min-width anche su Internet Explorer
Le soluzioni trovate sono molteplici e tutto sommato abbastanza "sporche".
C'è la soluzione "niente DTD".
Ovvero al posto della dichiarazione di tipo di documento inserire:
Vedi min-width, max-width re-hacked
Ci sono le varie espressioni condizionali... vedi:
max-width in Internet Explorer
MAX-WIDTH and flexible layout with short lines
funzionanti solo dipendentemente dalla risoluzione.
Pertanto per i layout in em perfettamente inutili.
Come suggerito da Gianluca (grazie ancora!) durante una discussione sul forum di Diodati bisogna usare un div aggiuntivo come riferimento per rendere questo sistema funzionante in em.
Ci sono i vari javascript (molto pesanti a mio avviso e inadatti a layout complessi)... vedi:
minmax.js
(specifico per curare i bachi di cui stiamo parlando) e IE7 (che cura anche altri bachi).
La soluzione che preferisco per il min-width rimane quella solo CSS di Stu Nicholls.
Anche se richiede almeno 2 div aggiuntivi, è la soluzione più stabile (e forse pulita) che ho trovato.
How to Use CSS to Solve min-width Problems in Internet Explorer
riassunta su CSS PLAY.
Vediamone un esempio.
In futuro approfondirò le parti che trovate più interessanti (ditemi! ditemi!) o che non capite.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> body {background:#fff; font-family:sans-serif; font-size:100%; color:#000} /* per tutti i browsers seri */ .width {width:50em; min-width:800px;} /* per IE6 */ * html .minwidth {border-left:800px solid #fff; position:relative; float:left; z-index:1;} * html .container {margin-left:-800px; position:relative; float:left; z-index:2;} .container{background-color:#FF0000} </style> </head> <body> <div class="width"> <div class="minwidth"> <div class="container"> Contenuti</p> </div> </div> </div> </body> </html>
edit: ops mi son dimenticato un pezzo.
Per migliorare il codice di Stu consiglio di aggiungere nel CSS riguardante il container width:100% (per i browser seri) e width:auto (per IE): gli elementi con larghezze in % all'interno così si dimensioneranno correttamente.
Rispondi quotando
... per il momento continuo ad usarli e non vedo controindicazioni
) ...
