December 18
Se non si riesce a capire il motivo per cui alcuni dei vostri margini della pagina web non tutto il lavoro in Internet Explorer, la proprietà hasLayout può essere la causa. HasLayout, si trova solo in vecchie versioni di IE, consente questi browser designassero elementi di una pagina Web. Il problema margine di hasLayout riguarda solo alcuni elementi HTML, come caselle di testo di input che ereditano oggetti di controlli padre. Tuttavia, è necessario sapere come risolvere il problema se si desidera creare layout di pagina coerenti che appaiono lo stesso in tutti i browser.
L'ereditarietà si riferisce all'acquisizione di qualcosa da qualcos'altro. In CSS, oggetti in una pagina Web possono ereditare gli attributi da un oggetto padre. Un oggetto principale è di solito un elemento di pagina, ad esempio div, che contiene l'oggetto in questione. Il codice di seguito illustra un semplice rapporto padre e figlio:
<Div>
<Input type = "text">
</ Div>
La casella di inserimento del bambino risiede in un div genitore. No eredità si verifica in questo esempio perché l'ingresso non acquisisce alcuna proprietà che il div possiede.
I margini, come si è visto in riviste e libri di testo, iniettano spazio bianco estetica in documenti. Quando si utilizza CSS per aggiungere un margine superiore 10 pixel per un div, per esempio, un browser assicura che nessun altro elemento di sopra del div rientri 10 pixel di esso. È inoltre possibile aggiungere i margini per elemento figlio che risiedono negli elementi principali, come segue:
<Div class = "padre">
<Input class = tipo "figlio" = "text">
</ Div>
L'elemento padre, div, fa riferimento a una classe CSS chiamato "padre" che può impostare il suo margine. L'elemento di input, che è un bambino, fa riferimento a una classe diversa che può impostare il suo margine di un altro valore.
Immaginiamo una situazione in cui un elemento di ingresso si trova all'interno di un div che risiede in un altro div, come mostrato nel seguente esempio:
<Div id = "elemento1" class = "element1Class">
<Div id = "element2" class = "element2Class">
<Input id = "Element3 class =" "type =" text element3Class ">
</ Div>
</ Div>
Il div elemento1 ha layout e contiene elemento2, che ha anche il layout. Element1 fa riferimento a una classe CSS che imposta il suo margine sinistro di 10 pixel. Element3, che risiede nel elemento2, fa riferimento a una classe che imposta il suo margine sinistro a 5. Quando si visualizza la pagina in browser diversi da IE7 o IE6, si vede una casella 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 suo contenitore nonni.
Questo problema IE non si verifica a meno che il valore di un elemento hasLayout genitore è "vero". Questa proprietà di sola lettura è specifico di Internet Explorer, e ha un valore predefinito di "false" per alcuni elementi. Quando il valore di un elemento hasLayout è "false", questo elemento si basa sulla sua madre a gestire il suo layout. Risolvere il problema del margine d'ingresso, dando l'elemento che contiene il controllo di input di un valore per la larghezza o l'altezza. Nell'esempio di cui sopra, è necessario impostare i valori nella element2Class. Si potrebbe anche dare l'elemento di altri valori di proprietà, nonché, come position: relative e lo zoom. Perché lo zoom è specifico per IE, codificare la logica in modo che il CSS si applica solo lo zoom nei browser IE.