La proprietà hasLayout di Internet Explorer (nelle versioni 6 e 7) è responsabile della maggior parte dei bug relativi al rendering CSS. Questo breve articolo di sintesi in forma di FAQ ha lo scopo di rispondere alle domande più frequenti poste dagli sviluppatori. Per un
ulteriore approfondimento, si consulti il documento On Having Layout
(di cui è disponibile la traduzione in italiano).
Che cos'è la proprietà hasLayout?
La proprietà hasLayout è una proprietà di scripting di Internet Explorer a sola lettura. La sua sintassi è
elemento.currentStyle.hasLayout. Questa proprietà restituisce un valore booleano che specifica se l'elemento in questione
ha o meno layout. Il valore true indica che l'elemento ha layout, il valore false che l'elemento non ha layout.
"Avere layout" è un espressione che, nella terminologia di Internet Explorer, riguarda appunto questa proprietà.
In quali versioni di Internet Explorer è presente la proprietà hasLayout?
La proprietà hasLayout è presente nelle versioni 6 e 7 di Internet Explorer. La versione 8 ha rimosso
tale proprietà. Storicamente parlando, questa proprietà era già presente nella versione 5 di questo browser.
Cosa innesca la proprietà hasLayout?
La proprietà hasLayout è innescata dalla presenza o dall'assenza di determinate dichiarazioni CSS su un dato
elemento. Per esempio, l'assenza di una larghezza o di un'altezza in un elemento di blocco farà in modo che la proprietà restituisca
il valore false sull'elemento. Esistono tuttavia alcuni elementi (come le tabelle e gli elementi dei form) che hanno sempre layout per
impostazione predefinita, anche se manca una dichiarazione CSS specifica.
Cosa causa la proprietà hasLayout?
La proprietà hasLayout è la principale responsabile di quasi tutti i bug nel rendering CSS di Internet Explorer.
Dai margini collassati al posizionamento assoluto, dagli elementi flottati fino alla comparsa di scrollbar indesiderate sulla pagina, non c'è
aspetto dei CSS in cui tale proprietà non sia coinvolta. Spesso tali bug vengono causati dal fatto che la proprietà hasLayout
restituisce false su un elemento. Tuttavia, sono stati documentati dei casi (come i margini ereditati negli elementi dei form),
in cui anche il valore true causava la comparsa di bug.
Come si fa a conoscere il valore della proprietà hasLayout su un elemento?
Si può usare JavaScript semplicemente modificando il codice che segue, incollandolo nella barra degli indirizzi di Internet Explorer
e quindi premendo Invio:
javascript:alert(document.getElementById('mioElemento').currentStyle.hasLayout);L'alert mostrerà il valore true o false, a seconda dei casi. Si tenga comunque presente che se dopo
aver modificato la dichiarazione CSS su un elemento il bug persiste, occorrerà eseguire la stessa procedura anche sull'elemento genitore,
in quanto la proprietà hasLayout ha la caratteristica di trasmettersi dall'elemento genitore agli elementi discendenti.
Come si fa a dare layout ad un elemento?
Per gli elementi di blocco, è sufficiente una dichiarazione come height: 1% o height: 1px per Internet
Explorer 6, mentre per Internet Explorer 7 si può usare min-height: 1px o overflow: hidden. Per gli elementi
inline, una dichiarazione che si dimostra efficace sembra essere zoom: 1. Ovviamente, dato che queste dichiarazioni possono non essere
valide ai fini della validazione, si possono usare i commenti condizionali, usando come filtro i selettori CSS per indirizzare gli stili verso un particolare
browser. Esempio:
<!--[if lt IE 8]>
<style type="text/css" media="screen">
* html #box {
height: 1%; /* IE6 */
}
div[id="box"] {
overflow: hidden; /* IE7 */
}
</style>
<![endif]-->In conclusione, per quel che riguarda la gestione dei bug CSS, consiglio anche di consultare sempre gli articoli di Position Is Everything, disponibili
anche questi in versione italiana all'indirizzo http://gabrieleromanato.altervista.org/css/pie.
