Box model: un workaround per IE

Stampa E-mail

Internet Explorer 5.x e IE 6 in quirk mode, ovvero senza un corretto doctype nella pagina, includono nella larghezza dei div (indicata nell'attributo width) anche il padding e i bordi. Invece i browser standard compliant interpretano la width come l'area a disposizione per il contenuto, alla quale si aggiungono padding e border.
Per ovviare ai problemi derivanti da queste differenze una delle soluzioni più gettonate è il box model hack di Tantek, o una delle sue varianti.

Io usavo sempre il box model hack "condensato" (simpyfied):

div#hack {
/*il box deve essere largo 120 px*/
/*e deve avere 5px di bordo e margine per lato*/
width: 100px; /*Opera 5*/
\width: 120px; /*IE=width comprende bordi, padding e contenuto*/
w\idth: 100px; /*altri browser standard compliant*/
border: 5px solid #333;
padding: 0 5px;
}

Tuttavia se da un lato questa soluzione permette di correggere il difetto di Explorer 5.x, dall'altro, quando si assegna un corretto doctype alla pagina, si rivela inadeguata per Internet Explorer 6.

Come risolvere questo ulterire preoblema? Su css dicuss ci viene proposto un'efficace workaround.

div#hack{
border: 5px solid #333;
padding: 5px;
width: 100px !important;
width /**/:120px;
}

Se in una classe css viene indicato più volte lo stesso attributo, il browser dà prevalenza all'ultimo della sequenza. L'aggiunta dell'attributo !important ad una riga, dà invece prevalenza al valore in essa indicato, anche rispetto a duplicazioni dello stesso attributo che dovessero seguirla. Questo è il comportamento corretto adottato da tutti i browser standard compliant, ma non di IE5 ed IE6/win che, non conoscendo !important, interpretano anche la regola successiva dandovi priorità perchè ultima nella sequenza.

L'aggiunta dei caratteri /**/ impedisce ad IE6 di leggere il valore della width indicato per ultimo (in questo caso 120px), così anche su IE6 (con corretto doctype) verrà applicata la larghezza letta nella riga precedente.

Attenzione: E' importante che l'ordine delle dichiarazioni della larghezza (width) sia esattamente così com'è, altrimenti l'hack non funzionerà. Tuttavia è possibile anteporre o postporre altre dichiarazioni, come quelle relative allo sfondo, ai colori, ecc., senza conseguenze dannose.

Ultimo aggiornamento ( venerdė 31 marzo 2006 )

Home arrow Webdesign arrow Box model: un workaround per IE

 I Feed RSS di miniDesign

In evidenza
Il file htaccess
Tutorial mappa Google
Ultime notizie
Le pių lette
Ricerca rapida