font-size dla przyciskiem i łączem

Question

Próbowałem ten prosty html:

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

i okazało się, że rozmiar czcionki tego przycisku wygląda większy niż rozmiar czcionki linku pomimo stylu. Czy ktoś wie, dlaczego styl działa inaczej dla linku i przycisku, i jak sprawić, aby wyglądały tak samo?

Answer 1

Rozmiar czcionki jest taki sam. Wygląda jednak inaczej, ponieważ domyślna czcionka strony różni się od domyślnej czcionki pola wprowadzania. Ustaw font-family na obu elementach tak, aby wyglądały tak samo.

zwykle zrobić:

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%; 
} 

aby uzyskać spójne czcionek nad stroną i pól formularza.

Answer 2

Nie należy używać zbyt dużej ilości CSS dla przycisków, ponieważ ich wyświetlanie zależy od systemu operacyjnego użytkownika.

Zamiast tego można użyć np. Zdjęć.

Answer 3

wygląda tak samo dla mnie, testowane na Firefox, IE6 i Chrome: http://jsbin.com/oveze
Proszę pamiętać:

• To zależy od przeglądarki i jej wartości domyślnych, a także może być różny w zależności od eksploatacji system.
• Bardzo często jest inna czcionka dla przycisków i pól wprowadzania. Ustaw też.
• Funkcja antyaliasingu lub ClearType może powodować nieznaczne różnice w przypadku braku tych samych kolorów (tło i czcionka).

Answer 4

miał ten sam problem w Chrome, później zorientowali się, że główną przyczyną była

body { 
    -webkit-font-smoothing: antialiased 
} 

zmienia to

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

naprawił.