Domande frequenti sulla proprietà hasLayout di Internet Explorer

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).

1. 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à.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.