Submit Button Next To Textfield With Same Height

I´m trying to achieve a perfect alignment with a submit button next to a text field, each with its own font size. The problem is that I get different results in different browsers

Solution 1:

box-sizing might be what you're looking for: http://jsfiddle.net/23CE8/1/

This worked for me in Chrome and in IE8, however IE8 now mis-aligns the input and the submit button (although they're the same height). I added vertical-align: middle to both elements (although it could be on their parent container) in order to resolve that.

If you want IE7 to use box-sizing you'll need some polyfills, there's a link to some here from Paul Irish's blog here: http://paulirish.com/2012/box-sizing-border-box-ftw/ he also explains some of the pros and cons.

Solution 2:

In your fiddle, the following changes to your CSS seems to line them up perfectly:

input[type=text] {
    height: 18px;
    font-size: 14px;    
}

input[type=submit] {
    font-size: 14px;
    height: 20px;
}​