Font Size Button et Link

J'ai essayé ce simple html:Font Size Button et Link

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

et a découvert que la taille de la police de ce bouton semble plus grande que la taille de la police du lien malgré le style. Est-ce que quelqu'un sait pourquoi le style fonctionne différemment pour le lien et pour le bouton, et comment les faire ressembler à la même chose?

Source

2009-09-30 Kate

La taille de la police est la même. Mais il ressemble différent parce que la police de page par défaut est différente de la police de champ d'entrée par défaut. Réglez le font-family sur les deux éléments identiques et ils se ressemblent.

que je fais habituellement:

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

obtenir des polices cohérentes sur les champs de la page et formulaire.

Source

2009-09-30 09:38:11 bobince

Je mets la même famille de fontes pour le lien et le bouton et obtiens le même résultat. Le texte à l'intérieur du bouton et du lien a une taille différente. – Kate

Fonctionne pour moi, dans n'importe quel navigateur. Postez votre cas de test exact qui ne fonctionne pas? – bobince

Bon j'avais besoin de ça aussi ça marche ... Merci bobince – Ljubisa

-4

Vous ne devriez pas utiliser beaucoup de CSS pour les boutons, car leur affichage dépend du système d'exploitation de l'utilisateur.

A la place, vous pouvez utiliser par exemple des images.

Source

2009-09-30 09:14:10 brainfck

L'utilisation d'images n'est pas polyvalente. – Kate

Attend la même chose pour moi, testé sur Firefox, IE6 et Chrome: http://jsbin.com/oveze
S'il vous plaît garder à l'esprit:

Cela dépend du navigateur et de ses valeurs par défaut, et peut également être différent en fonction de l'exploitation système.
Très souvent, il existe une police différente pour les boutons et les champs de saisie. Réglez-le aussi.
L'anti-aliasing ou ClearType peut provoquer une légère différence lorsque vous n'avez pas les mêmes couleurs (arrière-plan et police).

Source

2009-09-30 09:39:06 Kobi

Dans Firefox, Google Chrome et Safari police de bouton et de lien ressemble vraiment à la même chose, mais dans IE (7+) et Opera ne fonctionne pas! Dans la mesure où il y a beaucoup de problèmes avec la police de style pour le bouton je décide de remplacer le bouton avec lien. Remerciez tout le monde pour les réponses. – Kate

Si vous vous souciez tellement du style, un lien '' vous donnera plus de liberté qu'un bouton, certainement. Mais il ne se comportera pas exactement pareil ... – Kobi

eu le même problème dans Chrome, figuré plus tard cette cause clé était

body { 
    -webkit-font-smoothing: antialiased 
}

changer cela

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

fixe elle.

Source

2013-06-20 23:37:12 Ish

Merci, j'ai eu un problème similaire (le lien utilisait le paramètre 'antialiased', où ma balise' 'utilisait' auto'). – MaxGabriel

Font Size Button et Link

Répondre

Questions connexes