Faire un bouton et une zone de texte de la même hauteur uns à côté des autres

Je suis en train de remplacer la valeur par défaut de forme de style pour les deux éléments de forme, de sorte que la zone de texte et le bouton sont à la même hauteur et sont côte à côte de sorte qu'on dirait qu'ils sont un élément.

Dans certains navigateurs, il semble bien, mais dans certains cas, ils sont un pixel ou deux verticalement.
Voici un jsfiddle démo. Opera et Firefox OS X donnez-moi des questions.

http://jsfiddle.net/QS3ec/6/

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
    background-color: #fafafa;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: #6f6f6f;
}
input[type="submit"] {
    background-color: #fafafa;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: #6f6f6f;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}

<div style="background-color:black; padding:20px;">
    <form>
        <input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
   --><input type="submit" id="subscribe-button" value="subscribe">
    </form>
</div>

OriginalL'auteur Dex | 2013-10-05