How can I control the height of text inputs and submit input buttons in different browsers?

Question

I have a very little but hard (for me) problem to solve.

I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.

HTML

<input type="text" name="email" /><input type="submit" value="»" />

CSS

input[type=text] {
    width: 218px;
}

input[type=submit] {
    background: #000;
    color: #fff;
}

input[type=submit], input[type=text] {
    padding: 9px;
    font-size: 18px;
    line-height: 18px;
    float: left;
    border: 0;
    display: block;
    margin: 0;
}

I've setup this basic code on a jsfiddle here.

You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.

What am I missing?

Answer 1

Remove/add line-height: 18px; for both.

Answer 2

Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.

input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}

Answer 3

The problem is your padding that is applying wrong to your button. Trying solving it like this.

input[type=submit], input[type=text] {
  font-size: 18px;
  line-height: 18px;
  float: left;
  border: 0;
  display: block;
  margin: 0;
  height: 30px; /* or whatever height necessary */
}

Additionally, you can keep the padding left and right on your button like this.

input[type=submit] {
  background: #000;
  color: #fff;
  padding: 0px 9px;
}