Perché il mio sito non ha un bell’aspetto su altri browser?

Ora sto sviluppando il mio sito e considero FireFox come la zona di test principale, ma mentre lo ho testato su Chrome e IE9 i risultati sono stati diversi. Su Chrome uno dei livelli non si trova al suo posto una volta che apro la pagina, ma una volta che lo aggiorno si adatta esattamente dove voglio che sia. Strano? Mentre su IE uno dei div (quello di sinistra) sembra avere un margine più alto a sinistra che lo rende troppo lontano dagli altri div e il font è diverso, il che rende alcune parole più grandi e non si adattano ai bordi. Qual è l’idea migliore per far apparire bene mio padre su tutti i browser e su quale browser dovrei considerare la mia zona di test principale.

PS: Perché le persone votano per la mia domanda? Stiamo tutti imparando.

Prima di tutto,

Dovresti usare uno script reset / normalize nel tuo css. Uno buono è Eric Meyers .

Includi questo all’inizio del tuo foglio di stile.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 

Senza vedere il codice non posso dire esattamente, ma hai perso le migliori pratiche durante lo sviluppo. Dovresti controllare il lato durante lo sviluppo in IE e in altri browser, quindi potresti averli risolti mentre salivi.

  • Controlla il tuo tipo di documento.
  • reimpostare gli elementi
  • Identifica il problema del modello di box IE.

dovresti usare qualcosa come boilerplate per iniziare ogni progetto o semplicemente usare un reset di css.

In questo modo è ansible correggere quelle differenze minori tra i browser (paddings, margini ecc. Ecc.).

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } ... 

altro su: http://meyerweb.com/eric/tools/css/reset/

Per quanto riguarda i browser, è necessario testare i più importanti … A lungo termine (settimana per settimana) eseguo dei test in alcuni browser rilevanti pertinenti per assicurarsi che anche i suoi lavori funzionino correttamente.