Come stile un tag di ancoraggio per sembrare un pulsante con la stessa altezza del pulsante?

Question

Sto lavorando per cambiare i pulsanti sul mio sito per essere stilizzato con un tema ui jquery. Per lo più tutto sta andando bene con esso.

Ma ci sono alcuni tag di ancoraggio che volevo in stile come pulsanti. Ho aggiunto le classi e lo disegna come lo voglio eccetto che l'altezza non è la stessa. C'è un modo per fare in modo che il tag di ancoraggio dello stile abbia la stessa altezza del tag del pulsante in stile?

Ecco alcuni dei miei 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 esempio di utilizzarlo su un pulsante:

<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 esempio di usarlo su un achor:

<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

Questo dovrebbe Fallo:

display: inline-block; 

Il motivo per cui la tua altezza non funziona è perché il tag di ancoraggio segna un elemento in linea. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2 non supporta inline-block, se hai ancora bisogno di sostenerlo, ma di solito si può get it to work aggiungendo una regola display:-moz-inline-boxprima la linea di cui sopra.

In alternativa, è possibile provare a utilizzare la proprietà line-height.

Answer 2

confine e align sono deprecati attributi, o almeno questi sono circa la presentazione, non contento e come tale dovrebbe essere fatto in CSS, non nel codice HTML:

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

Inoltre, alt è un attributo obbligatorio dell'elemento img. Può essere vuoto (alt = "" per immagini di fantasia senza senso) o significativo (se l'immagine trasmette informazioni non già presenti nel testo)