font-size per Button e link

Ho provato questo semplice html:font-size per Button e link

TEST FONT SIZE</br> 
<input type="button" value="test bytton" style="font-size:20px"> 
<a style="font-size:20px">test link</a>

e ha scoperto che la dimensione del carattere di questo pulsante appare più grande rispetto alla dimensione del carattere del collegamento a dispetto di stile. Qualcuno sa perché lo stile funziona in modo diverso per il collegamento e per il pulsante, e come renderli simili allo stesso?

fonte

2009-09-30 Kate

La dimensione del carattere è la stessa. Ma è aspetto diverso perché il carattere di pagina predefinito è diverso dal carattere predefinito del campo di input. Imposta lo font-family su entrambi gli elementi allo stesso modo e appariranno uguali.

faccio di solito:

body, input, button, select, option, textarea { 
    font-family: ...; /* whatever font */ 
} 
body { 
    font-size: x%; /* whatever base font size I want */ 
} 
input, button, select, option, textarea { 
    font-size: 100%; 
}

per ottenere i caratteri coerenti sui campi della pagina e la forma.

fonte

2009-09-30 09:38:11 bobince

Ho impostato la stessa famiglia di caratteri per il collegamento e il pulsante e ottengo lo stesso risultato. Il testo all'interno del pulsante e il link hanno dimensioni diverse. – Kate

Funziona per me, in qualsiasi browser. Pubblica il tuo caso di test esatto che non funziona? – bobince

Buono. Avevo bisogno di questo, funziona ... Grazie bobince – Ljubisa

-4

Non si dovrebbe usare molto CSS per i pulsanti, poiché la loro visualizzazione dipende dal sistema operativo dell'utente.

Invece è possibile utilizzare per esempio le immagini.

fonte

2009-09-30 09:14:10 brainfck

Uso delle immagini non è multiuso. – Kate

sembra lo stesso per me, testato su Firefox, IE6 e Chrome: http://jsbin.com/oveze
Si prega di tenere a mente:

Questo dipende dal browser e le sue impostazioni predefinite, e può anche essere diverso a seconda del funzionamento sistema.
Molto spesso c'è un font diverso per pulsanti e campi di input. Impostalo anche tu.
Anti-aliasing o ClearType possono causare una leggera differenza quando non si hanno gli stessi colori (sfondo e carattere).

fonte

2009-09-30 09:39:06 Kobi

In Firefox, il carattere di Google Chrome e Safari di pulsante e collegamento sembra davvero lo stesso, ma in IE (7+) e Opera no! Per quanto ci sono un sacco di problemi con il font di stile per il pulsante Decido di sostituire il pulsante con il link. Grazie a tutti per le risposte. – Kate

Se ti interessa molto dello stile, un collegamento '' ti darà più libertà di un pulsante, sicuramente. Ma non si comporta esattamente allo stesso modo ... – Kobi

aveva lo stesso problema in Chrome, poi capito che la causa principale era

body { 
    -webkit-font-smoothing: antialiased 
}

cambiare questo a

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
}

riparato.

fonte

2013-06-20 23:37:12 Ish

Grazie, ho avuto un problema simile (il link stava usando l'impostazione 'antialiased', dove il mio tag ' stava usando 'auto'). – MaxGabriel

font-size per Button e link

risposta

Problemi correlati