Taille de police pour le Bouton et le Lien

J'ai essayé cette simple html:

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

et a trouvé que la taille de la police de ce bouton semble plus grand que la taille de la police de la liaison en dépit de style.
Quelqu'un sait pourquoi le style fonctionne différemment pour le lien et pour le bouton, et la façon de faire ressemble à la même chose?

OriginalL'auteur Kate | 2009-09-30

  1. 24

    La taille de police est la même. Mais il semble différent parce que la page par défaut de la police est différente de la valeur par défaut d'entrée-terrain de la police. Définir la font-family sur les deux éléments de la même et ils ont la même apparence.

    J'ai l'habitude de faire:

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

    pour obtenir des réponses cohérentes polices de caractères sur la page et les champs de formulaire.

    J'ai mis la même police de caractères de la famille pour le lien et bouton et obtenir le même résultat. Le texte à l'intérieur du bouton et lien ont la taille différente.
    Fonctionne pour moi, dans n'importe quel navigateur. Publier vos test exact de cas qui ne fonctionne pas?
    Bon j'avais besoin de ce que cela fonctionne bien ... Merci bobince

    OriginalL'auteur bobince

  2. 4

    Eu le même problème dans Chrome, plus tard compris que la cause principale était 

    body {
    -webkit-font-smoothing: antialiased
}

    évolution de ce 

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

    fixe.

    Merci, j'ai eu un problème similaire (le lien a été à l'aide de la antialiased, où mon <input type="submit"> balise à l'aide de auto).

    OriginalL'auteur Ish

  3. 1

    Regarde la même chose pour moi, testé sur Firefox, IE6 et Chrome: http://jsbin.com/oveze

    Veuillez garder à l'esprit:

    • Cela dépend du navigateur et de ses valeurs par défaut, et peut également être différent selon le système d'exploitation.
    • Très souvent, il y a une police différente pour les boutons et les champs de saisie. Définissez trop.
    • Anti-aliasing ou ClearType peut causer une légère différence quand vous n'avez pas les mêmes couleurs (fond et de police).
    Dans Firefox, Google Chrome et Safari police de bouton et lien ressemble vraiment la même, mais dans IE (7+) et de l'Opéra n'est pas! Aussi loin que il ya beaucoup de problèmes avec le style de police pour le bouton je décide de remplacer le bouton avec le lien. Merci tout le monde pour les réponses.
    Si vous avez beaucoup de style, un <a> lien vous donnera plus de liberté que sur un bouton, certainement. Mais il ne se comportera pas exactement la même chose...

    OriginalL'auteur Kobi

  4. -4

    Vous ne devez pas utiliser beaucoup de CSS pour les boutons, parce que leur affichage dépend des utilisateurs du système d'exploitation.

    Au lieu de cela, vous pouvez utiliser par exemple des images.

    À l'aide d'Images n'est pas multi-usage.

    OriginalL'auteur brainfck