Internet Explorer 8 CSS Hack: immagine di sfondo non è in fila

January 1

Quando si progetta il tuo sito web, è possibile creare un'immagine di sfondo che definisce dove gli elementi, come ad esempio un blocco di testo o un elenco di collegamenti, devono apparire sulla pagina. Con i CSS, è possibile lo stile i vostri elementi HTML per creare un senso di allineamento sovrapposti. Se Internet Explorer 8 non allineare gli oggetti con lo sfondo come progettato, è possibile utilizzare ciò che è noto come un hack CSS per porvi rimedio.

Margini Ripristino

Molte volte, il termine "hack CSS" si riferisce all'utilizzo di soluzioni CSS che cercherà di soddisfare per un browser specifico, in questo caso Internet Explorer 8. È possibile applicare solo alcuni CSS per IE 8 in diversi modi utilizzando istruzioni condizionali che gli utenti del server dopo aver determinato browser del visitatore. Ad esempio, è possibile specificare una sola riga di testo nel file CSS in questo modo:

<Style type = "text / css">
[Se IE 8]

{
margin: 0;
padding: 0;
}
</ Style>

In alternativa, è possibile caricare un intero foglio di stile per IE 8 con la seguente sintassi:

<! - [If IE 8]>
<Link rel = "stylesheet" type = "text / css" href = "ie8.css" />
<! [Endif] ->

Margini Ripristino

Quando le immagini di sfondo e altri oggetti non si allineano tuo sito web, prova a ripristinare i margini. Questo sovrascriverà i margini di default tra gli oggetti e nella pagina stessa, che possono differire tra i browser. Il seguente codice si resetta margini o padding per qualsiasi elemento della pagina in tutti i browser:

{
margin: 0;
padding: 0;
}

È quindi possibile iniziare la codifica del proprio sito web in modo che l'immagine di sfondo si allineerà con oggetti sovrapposti.

considerazioni

Ripristino margini o padding si applica ad ogni elemento nella tua pagina in modo da avere a specificare i margini - lo spazio tra il bordo dell'oggetto e delle sue contenere o che circondano gli oggetti - e imbottitura - lo spazio tra il bordo del vostro oggetto e contenuti all'interno di esso - di default per ogni elemento. Se il tuo sito contiene molti elementi, si può trovare questa soluzione non è conveniente. Se si sta allineando eventuali elementi con posizionamento relativo, l'allineamento può essere ancora più sensibili ai margini predefiniti di IE8. Considerare l'utilizzo di posizionamento fisso, che porrà l'oggetto rispetto alla finestra del browser e non altri elementi, che possono variare in posizione.

Allineamento Sfondi

Con i CSS, sono disponibili diverse opzioni di default per l'allineamento immagini di sfondo nei vostri elementi, se tale elemento se la pagina stessa o uno strato div. Ad esempio, è possibile allineare lo sfondo in alto a sinistra, in basso a destra o al centro. Per l'allineamento più preciso, è possibile utilizzare una percentuale - della larghezza contenitore o l'altezza - o definire pixel esatte o altre unità di offset dello sfondo dal bordo interno del contenitore. Nel seguente esempio, lo sfondo inizierà 10 pixel da sinistra e 200 pixel dalla parte superiore, che può aiutare lo allinea con altri contenuti sulla vostra pagina.

div
{
background-position: 10px 200px;
}


Articoli Correlati