Making a button and textbox the same height next to each other - css

Question

I'm trying to override the default form styling for two form elements so that the text box and button are both the same height and are side by side so that it looks like they are one element.
In some browsers it looks fine but in some they are a pixel or two off vertically.
Here is a jsfiddle demo. Opera and Firefox on OS X are giving me issues.
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>

Answer 1

One simple fix is to modify the following CSS rule:
#subscription-email-text-field {
vertical-align: top;
display:inline-block;
font-size:0.9em;
font-weight:400;
border:0;
width:250px;
height:32px;
margin:0;
}
Adding vertical-align: top takes care of the baseline alignment.
See demo at: http://jsfiddle.net/audetwebdesign/EmAnr/
Footnote:
To add the left border on the button element, remember to add the border styling,
which can be done as follows:
#subscribe-button {
display:inline-block;
border: 1px solid black;
border-width:0px 0px 0px 1px;
margin:0;
height:32px;
}

Answer 2

All I've done is increased the height of the submit box:
height: 46px;
http://jsfiddle.net/QS3ec/9/
This is really tough. I've Tested in Safari, Firefox, Opera and Chrome on Mountain Lion so this may not be the right solution.
I believe the problem is that the inputs are replacement elements that have been rendered by the browser using non-CSS mechanisms so styling may not apply as you would expect. I had a similar question in the past that shed some light on this sort of thing. There always seems to be strange behavior when trying to style old UI components, buttons, inputs, etc.
Display Table Cell inconsistency.

Answer 3

Problem is the padding you have given to the text box. On certain
browsers padding has only horizontal effect on input type = button or submit.
// fix
add 'box-sizing: content-box' rule to the input[type='submit'] { } closure.
This will do on certain browsers as only few have implemented it.
As a workaround set height of the submit button to
"height of text-box + ( 2 * padding given to text-box')
inorder to account for the missing vertical padding.
This is the best way to achieve your goal (cross-browser).
eg: height of your text-box = 32px. so height of the button = 32 + 2 * 7 = 46px