Boutons Bulletproof

HTML

<div class="wrap">
    <div class="section">
        <h2>Les boutons sans style</h2>
        <p>
            <a href="#">Bouton</a>
            <input type="submit" value="Bouton">
            <button type="submit"><i class="ico"></i>Bouton</button>
        </p>
    </div>
    <div class="section">
        <h2>Premier essai :</h2>
        <h3>Sur la base de la balise "a", la hauteur est définie via height et line-height pour centrer le texte verticalement</h3>
        <p>
            <a href="#" class="base btn-bad">Bouton</a>
            <input type="submit" value="Bouton" class="base btn-bad">
            <button type="submit" class="base btn-bad"><i class="ico"></i>Bouton</button>
        </p>
        <p class="result">Le rendu est bon sur le "a", mais sur "input" et "button" il y a des différences, ce qui pose problème lorsqu'ils sont associés au "a".</p>
    </div>
    <div class="section">
        <h2>Deuxième essai :</h2> 
        <h3>La hauteur est définie avec un padding vertical, le line-height est lui uniformisé sur celui du input (via <em>line-height:normal;</em>).</h3>
        <p>
            <a href="#" class="base btn">Bouton</a>
            <input type="submit" value="Bouton" class="base btn">
            <button type="submit" class="base btn"><i class="ico"></i>Bouton</button>
        </p>
        <p class="result">Il reste nécessaire de faire quelques ajustements pour IE7 mais on a enfin des boutons d'apparence similaire sur les différents navigateurs.</p>
    </div>
    <div class="section">
        <h2>On est maintenant libre de les modifier comme on veut :</h2>
        <h3>Par exemple :</h3>
        <p>
            <a href="#" class="base btn actions back"><i class="ico"></i>Retour</a>
            <input type="submit" value="Modifier" class="base btn actions modify">
            <button type="submit" class="base btn actions valid">Valider<i class="ico"></i></button>
        </p>
    </div>
</div>

CSS

/* Reset
==========*/
input, select, option, optgroup, textarea, button { font-family: inherit; font-size:inherit;}
input[type="submit"], input[type="button"], input[type="reset"], button { cursor: pointer; border: 0; overflow:visible; }
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; }
input[type="submit"]:-moz-focusring, input[type="button"]:-moz-focusring, input[type="reset"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted black; }

/* General
===========*/
html {line-height:1.3;}
body {font-size:14px; background:#EFEFEF; font-family:arial; padding:20px;}
.wrap { width:90%; background:#FFF; margin:0 auto; padding:15px; -webkit-box-shadow:0 2px 3px #777; -moz-box-shadow:0 2px 3px #777; box-shadow:0 2px 3px #777;}
.section {border-bottom:1px solid #efefef; padding:0 0 10px; margin:0 0 15px;}

h2 {font-size:16px; margin:0 0 10px; color:#333;}
h3 {font-size:14px; margin:0 0 10px;}
p {margin:0 0 15px;}
.result {font-style:italic; color:#777;}
a {text-decoration:none;}
.ico {width: 0; height: 0; margin-right:5px; border-width:4px; border-style:solid; border-color:transparent transparent transparent midnightblue; display: inline-block;}

/* Les boutons
===============*/
[class^="base"], input[class^="base"], button[class^="base"] {border-width:1px; border-style:solid; display:inline-block; padding:0 10px; margin:0;
    /* Look */
    color:midnightblue;
    border-color:lightslategrey;
    background:lightsteelblue;
}
[class^="base"]:hover {background:darkgray;}

/* 1er essai */
.btn-bad {height:25px; line-height:25px;}

/* 2ème essai */
.btn, input.btn, button.btn {line-height:normal; padding:4px 10px; height:auto; vertical-align:middle;}

/* A cause d'IE7 - on redéfinit la taille de police, sinon c'est celle par défaut qui est prise en compte */
[class^="base"] {font-size:14px;}
/* Pour IE7 - alignement vertical de l'icône */
.ie7...