CSS di Firefox Top margine non è lo stesso di Chrome & IE

August 21

CSS di Firefox Top margine non è lo stesso di Chrome & IE


Se hai lavorato sul tuo sito web cercando di far sembrare tutto perfetto e in seguito scoperto che sembra stravagante in un altro browser, non siete soli. Quello che potrebbe apparire come un capolavoro finito in Internet Explorer può apparire come un completo disastro in Firefox o Chrome. Se i margini migliori delle tue pagine non appaiono lo stesso su più browser, ci sono diverse possibili cause - e le soluzioni si possono utilizzare per risolverlo.

Fogli di stile

fogli di stile CSS consentono di modificare gli elementi di una pagina Web, come il tipo di carattere, colore o margini, con caratteristiche di stile più comunemente inseriti in un file esterno. L'attributo margine superiore - margin-top - stabilisce la distanza verticale dello spazio tra la parte superiore della finestra e il corpo della pagina Web, e il suo valore può specificare la lunghezza o la percentuale, o utilizzare "auto", il browser predefinito . Poiché ogni browser può avere un diverso margine superiore di default, il margine superiore del tuo sito web può rendere un po 'diverso in ognuno.

Principali browser web

Secondo i dati NetMarketShare.com, 54 per cento delle persone in rassegna il Web utilizzando Internet Explorer nel marzo 2012. Firefox è stato il secondo a 21 per cento, e Chrome è arrivato terzo al 19 per cento. Gli sviluppatori e designer principalmente considerano questi tre browser durante la creazione di siti web. Se Chrome e IE visualizzare il margine superiore come previsto, ma Firefox non lo fa, è possibile utilizzare i CSS per ripristinare le impostazioni predefinite del browser o incongruenze del browser corrette, che consente di acconciare i vostri margine superiore come si desidera.

reset CSS

Un reset CSS, noto anche come reset CSS, riduce le incongruenze del browser Web, che possono esistere anche all'interno delle diverse versioni del browser. In IE7, per esempio, il margine superiore predefinito per il corpo è di 15 pixel; in IE8 e IE9, è 8 pixel. Con un reset CSS, si ripristina in sostanza, il margine superiore a zero, utilizzando qualcosa di simile al codice generico di seguito:

{Margin-top: 0; padding: 0; }

Questo rimuove tutte le impostazioni dei margini migliori in modo da poter definire il proprio. Molti fogli CSS reset stile esistono nel dominio pubblico, fornendo un esempio, se si desidera ripristinare altri elementi HTML della pagina Web.

Normalize.css

Un'alternativa a un reset CSS è quello di utilizzare Normalize.css, che è un file CSS open-source è possibile personalizzare per rendere i browser Web visualizzano gli elementi delle pagine Web in modo simile. A differenza di un reset CSS, non elimina le impostazioni predefinite del browser, ma invece di correggere le incongruenze del browser. A partire dal 2012, il file supporta tutti e tre i principali browser Web e include il codice per correggere gli elementi HTML che controllano elementi come blockdisplay, incoerenza font-family, margini e altro ancora.