CSS: Dimensioni dei tasti in Chrome è diverso da Firefox

Question

Ho il seguente codice HTML:

<style type="text/css"> 
.submitbutton{margin-left:-2px;padding:1px} 
</style> 
... 
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form> 

In Firefox, il pulsante di ingresso ha più imbottitura che in Chrome.

Qualche idea, perché?

AGGIORNAMENTO: Se ti stai chiedendo perché ho il margine negativo - è perché tra il campo di input e il pulsante di input - c'è troppo spazio.

Answer 1

Gli elementi del modulo vengono visualizzati in modo diverso (come valori predefiniti) in base al sistema operativo e/o al browser. se vuoi che i tuoi elementi del modulo (campi di input, pulsanti di invio, ecc.) abbiano lo stesso aspetto in tutte le istanze, devi definirli in modo esplicito usando bordi, paddings e margini.

Answer 2

Anche se come test di sviluppo in diversi browser e vedere la differenza nei pulsanti, l'utente non lo farà. È troppo facile concentrarsi su cose che gli utenti non noteranno: l'utente probabilmente ha Firefox o IE o Chrome, ma non tutti. Raramente gli utenti cambiano mai i browser nel tempo, tanto meno si spostano tra loro e si lamentano di alcuni pixel diff.

Quindi se si considerano i pulsanti e l'esperienza in un solo browser alla volta e se funziona bene in quell'esperienza/browser, non preoccuparsi di dedicare più tempo. Passa invece ai prossimi passi.

Questo non risponde "perché", ma qualcun altro ha spiegato quello.

Answer 3

La cosa che nessuno è menzionare è che Chrome ripristina il CSS per questi elementi:

input[type="button"], 
input[type="submit"], 
input[type="reset"], 
input[type="file"]::-webkit-file-upload-button, 
button 

Quindi, non importa che cosa si imposta l'imbottitura a, per quanto posso dire, sarà sovrascritto da Chrome. Ho provato a utilizzare !important e altre tecniche e ancora senza fortuna. Se qualcuno ha qualche idea in merito, mi piacerebbe saperlo.

Answer 4

/* Remove button padding in FF */ 
button::-moz-focus-inner { 
    border:0; 
    padding:0; 
} 

Otterrai lo stesso aspetto del pulsante in Chrome e Firefox.

Answer 5

Provare a utilizzare -webkit-box-sizing:content-box, quindi leggere su box-models.

Answer 6

Ho provato ora a modificare altezza e riempimento nello stesso tempo.

Il risultato è abbastanza buono. Sembra essere corretto per entrambi i browser (FF e Chrome in Linux) ... per esempio ho messo:

.classname { 
height:20px; 
    padding:4px; 
} 

forse è solo il mio giorno fortunato ... ma si può provare.

Answer 7

Per ottenere la stessa dimensione su entrambi i browser, è necessario impostare gli stessi valori iniziali su tutti gli elementi CSS, come un reset.

Ecco come ho risolto il problema: mettere questo all'inizio del file css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a 
    { 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     margin-left: 0px; 
     padding-top: 0px; 
     padding-right: 0px; 
     padding-bottom: 0px; 
     padding-left: 0px; 
     border-top-width: 0px; 
     border-right-width-value: 0px; 
     border-bottom-width: 0px; 
     border-left-width-value: 0px; 
    } 

Ora si deve risolvere alcuni cambiamenti di aspetto sul pagina, ma avrà un aspetto quasi la stessa su tutto il i browser.

Answer 8

Prova questa

/* Browser Firefox to match the Chrome */ 
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner { 
    padding: 0 !important; 
    border: 0 none !important; 
}