Se hai lavorato sul tuo sito web cercando di rendere tutto il look perfetto e più tardi scoperto sembra stravagante in un altro browser, non siete soli. Quello che potrebbe sembrare un capolavoro finito in Internet Explorer può apparire come un completo disastro in Firefox o Chrome. Se i margini superiore delle tue pagine non appaiono lo stesso su più browser, ci sono diverse possibili ragioni perché..--e soluzioni alternative che è possibile utilizzare per risolvere il problema.

Fogli di stile CSS

Fogli di stile CSS consentono di modificare gli elementi di una pagina Web come ad esempio il tipo di carattere, colore o margini, con specifiche di stile più comunemente inserite in un file esterno. L'attributo di margine superiore - margine-top-- stabilisce la distanza verticale dello spazio tra la parte superiore della finestra e il corpo della pagina Web, e il valore può specificare la lunghezza o la percentuale, o utilizzare "automatico", il browser di default. Come ogni browser può avere un margine superiore di predefinito diverso, il margine superiore del tuo sito Web può rendere leggermente diverso in ciascuno di essi.

Principali Web browser

Secondo i dati NetMarketShare.com, 54 per cento di persone navigato nel Web utilizzando Internet Explorer nel marzo 2012. Firefox è stato secondo al 21 per cento, e Chrome è arrivato terzo al 19 per cento. Sviluppatori e designer principalmente considerare quei tre browser durante la creazione di siti Web. Se Chrome e IE Visualizza il margine superiore, come previsto, ma non di Firefox, è possibile utilizzare CSS per reimpostare le impostazioni predefinite del browser o incoerenze corretta del browser, consentendo di stile il margine superiore come si desiderano.

CSS Reset

Un CSS Reset, noto anche come Reset CSS, riduce le incoerenze di browser Web, che possono esistere anche all'interno le varie versioni di browser. In IE7, ad esempio, il margine superiore di predefinito per il corpo è 15 pixel; in IE8 e IE9, è 8 pixel. Con un CSS Reset, è essenzialmente reimpostare il margine superiore a zero utilizzando qualcosa di simile al codice generico qui sotto:

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

Questo rimuove tutte le impostazioni di margine superiore, quindi è possibile definire il proprio. Molti fogli di stile CSS Reset esistono nel dominio pubblico, fornendo un esempio, se si desidera reimpostare altri elementi HTML sulla tua pagina Web.

Normalize.CSS

Un'alternativa a un CSS Reset è quello di utilizzare Normalize.css, ovvero un file CSS di open source è possibile personalizzare per rendere il browser visualizzare gli elementi delle pagine Web allo stesso modo. A differenza di un CSS Reset, non elimina le impostazioni predefinite del browser, ma invece corregge le incongruenze del browser. A partire dal 2012, il file supporta tre tutti i principali browser Web e include codice agli elementi HTML corretti che controllano elementi quali blockdisplay, incoerenza di famiglia di caratteri, i margini e altro ancora.