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

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

I have a text input, and开发者_JAVA技巧 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?

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

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;}

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;
}

input {
 height: 19px;
 }

This maybe? Also, remove the padding property. http://jsfiddle.net/xkeshav/e6aTd/1/

Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.

You need to remove the height and work on the actual height of the input text field just by padding/font-size

jsfiddle

Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...

The best solution I found is to put a div arround and set its style to display: flex.

All is perfect this way.

    body {
        background: #ccc;
    }
    div{
        display: flex;
    }
    input[type=text] {
      width: 218px;
    }
    input[type=submit] {
      background: #000;
      color: #fff;
    }
    input[type=submit], input[type=text] {
      padding: 5px;
      font-size: 25px;
      border: 0;
      margin: 0;
    }
    <div><input type="text" name="email"  /><input type="submit" value="»" /></div>

TRY

body {
    background-color: #ccc;
}

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

Working DEMO