Comment styliser une balise d'ancrage pour qu'elle ressemble à un bouton de la même hauteur que le bouton?

Question

Je travaille sur le changement des boutons de mon site pour qu'ils soient stylés par un thème jquery ui. La plupart du temps tout va bien avec ça.

Mais il y a quelques balises d'ancrage que je voulais appeler des boutons. J'ai ajouté les classes et le style comme je le veux sauf que la hauteur n'est pas la même. Est-il possible de faire en sorte que l'étiquette d'ancrage stylisée ait la même hauteur que l'étiquette de bouton stylisée?

Voici mon css:

.mine-button { 
    outline: 0; 
    margin: 0 4px 0 0; 
    padding: 0 1em; 
    height: 2em; 
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative; 
    text-align: center; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px 
} 

Un exemple en utilisant sur un bouton:

<button class="mine-button ui-state-default" 
onclick="stuff here"> 
    <img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add 
</button> 

Un exemple en utilisant sur un Acor:

<a class="mine-button ui-state-default" href="bla"> 
    <img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free 
</a> 

Answer 1

Cela devrait faites-le:

display: inline-block; 

La raison pour laquelle votre taille ne fonctionne pas est que l'étiquette d'ancrage marque un élément en ligne. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2 ne prend pas en charge inline-block, si vous avez encore besoin de le soutenir, mais vous pouvez généralement get it to work en ajoutant une règle display:-moz-inline-boxavant la ligne ci-dessus.

Vous pouvez également utiliser la propriété line-height.

Answer 2

frontière et align sont des attributs dépréciée, ou tout au moins ceux-ci sont sur la présentation, ne se contente pas et en tant que telle devrait être fait en CSS, pas dans le code HTML:

.mine-button { 
    border: 0; 
    vertical-align: bottom/middle/top/whatever; 
} 

En outre, alt est un attribut obligatoire de l'élément img. Peut être vide (alt = "" pour des images fantaisistes mais dénuées de sens) ou significatif (si l'image véhicule des informations qui ne sont pas déjà présentes dans le texte)