Comment aligner les boutons HTML avec des liens?

Question

J'essaye d'aligner un bouton d'entrée avec un lien (class "button"), mais dans Safari et Chrome il y a une différence de 1 pixel en haut et je n'arrive pas à comprendre pourquoi.

<input class="button" name="commit" type="submit" value="Enrol" /> 
<a href="#" class="button" id="cancel">Cancel</a> 

input.button { 
    height: 38px; 
    font-size: 18px; 
    color: white; 
    font-weight: normal; 
    font-style: normal; 
    background: #4D28B2; 
    border: 1px solid gray; 
    padding: 5px; 
} 
a.button { 
    display: inline-block; 
    padding: 5px; 
    height: 24px; 
    font-size: 18px; 
    color: white; 
    text-decoration: none; 
    font-weight: normal; 
    font-style: normal; 
    text-align: left; 
    background-color: #4D28B2; 
    border: 1px solid gray; 
} 

Quel est le problème et comment puis-je résoudre?

Answer 1

Supprimez le rembourrage, définissez les hauteurs à la même valeur, ajustez l'alignement vertical sur les deux, puis effectuez un redimensionnement pour tous les navigateurs.

Voici un lien vers un exemple de travail. http://jsfiddle.net/cjXcp/5/

Et le code:

input.button { 
    height: 38px; 
    font-size: 18px; 
    color: white; 
    font-weight: normal; 
    font-style: normal; 
    background: #4D28B2; 
    border: 1px solid gray; 
    vertical-align: middle; 
    padding: 0px 5px; 
} 
a.button { 
    display: inline-block; 
    height: 38px; 
    font-size: 18px; 
    color: white; 
    text-decoration: none; 
    font-weight: normal; 
    font-style: normal; 
    text-align: left; 
    background-color: #4D28B2; 
    border: 1px solid gray; 
    vertical-align: middle; 
    line-height: 38px; 
    padding: 0px 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
} 

Ce code pourrait être réduit en verbosité, mais vous voyez l'idée.

Answer 2

Un des motifs possibles est l'espace en excès. Différents navigateurs interprètent l'indentation et les sauts de ligne en HTML différemment. Vous devriez sortir tout votre code HTML à travers une fonction d'effacement des espaces. (En prime, il pourrait aussi économiser la bande passante)

C'est ce que je fais, mais il ne joue pas bien avec JavaScript:

function ob_compress_html($str) 
    { 
    return preg_replace(array('{>\s{2,}<}', '{^\s+}', '{\s+$}D'), array('><'), $str); 
    } 

ob_start('ob_compress_html'); 

Answer 3

Adjonction float: left; aux deux éléments résout ce problème dans Chrome et Firefox. Vous pouvez également ajouter marge gauche: 2px; à .bouton pour restaurer l'espace manquant entre les boutons lors de l'utilisation de cette solution.