Nwlapcug.com


Input di IE ed ereditando il margine del genitore

Se non riesci a capire perché alcune dei margini della pagina Web non funziona abbastanza in Internet Explorer, la proprietà hasLayout può essere la causa. HasLayout, trovato solo nelle vecchie versioni di IE, consente ai quei browser agli elementi di stile in una pagina Web. Il problema del margine di hasLayout riguarda solo alcuni elementi HTML, quali caselle di testo di input che ereditano la proprietà dei controlli padre. Tuttavia, avete bisogno di sapere come risolvere il problema se si desidera creare il layout di pagina coerente che appaiono gli stessi in tutti i browser.

Ereditarietà e relazioni

L'ereditarietà si riferisce all'acquisizione di qualcosa da qualcos'altro. In CSS, oggetti su una pagina Web possono ereditare gli attributi da un oggetto padre. Un oggetto padre è di solito un elemento di pagina, ad esempio div, che contiene l'oggetto in questione. Il codice riportato di seguito viene illustrata una semplice relazione di padre e figlio:

< div >
< input type = "text" >
< / div >

Casella di input bambino risiede in un div padre. Nessuna ereditarietà si verifica in questo esempio, perché l'input non acquisisce tutte le proprietà che possiede l'elemento div.

Margini

Margini, come visto in riviste e libri di testo, è possibile iniettare estetica dello spazio bianco in documenti. Quando si utilizza CSS per aggiungere un margine superiore di 10 pixel ad un div, ad esempio, un browser non garantisce che nessun altro elemento sopra il div all'interno di 10 pixel di esso. È inoltre possibile aggiungere margini elemento figlio che risiedono in elementi padre, come segue:

< div class = "superiore" >
< alimentazione classe = "bambino" type = "text" >
< / div >

L'elemento padre, div, fa riferimento a una classe CSS denominata "padre" che si può impostare il suo margine. L'elemento input, che è un bambino, fa riferimento a una classe diversa che può impostare il margine su un altro valore.

Problema di IE HasLayout

Immaginate una situazione in cui un elemento di input si trova all'interno di un div che risiede in un altro div, come illustrato nell'esempio seguente:

< div id = "element1" class = "element1Class" >
< div id = "element2" class = "element2Class" >
< input id = "element3 classe ="element3Class"type ="text">
< / div >
< / div >

Il div element1 ha layout e contiene element2, che ha anche il layout. Element1 fa riferimento a una classe CSS che imposta il margine sinistro a 10 pixel. Elemento3, che risiede nella element2, fa riferimento a una classe che imposta il margine sinistro a 5. Quando si visualizza la pagina in browser diversi da IE7 o IE6, verrà visualizzata una finestra di testo che si trova cinque pixel dal bordo sinistro del browser; in IE7 o IE6, si siede 15 pixel dal bordo perché ha ereditato il margine del relativo contenitore padre.

Soluzione

Questo problema di IE non si verifica a meno che il valore di un elemento padre hasLayout è "true". Questa proprietà di sola lettura è specifica per Internet Explorer e ha un valore predefinito "false" per alcuni elementi. Quando il valore di un elemento hasLayout è "false", quell'elemento si basa su suo padre per gestire il layout. Risolvere il problema di input margine dando l'elemento che contiene il controllo di input un valore per la larghezza o l'altezza. Nell'esempio precedente, è necessario impostare tali valori nella element2Class. Si potrebbero anche dare l'elemento altri valori di proprietà come pure, ad esempio: posizione e zoom. Perché lo zoom è specifico di IE, codice la logica in modo che il CSS si applica solo zoom nel browser IE.