Make form button/text field same height in all browsers?

Question

I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfid

Answer 1

I found this in normalize.css that solved it for me:

// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Answer 2

Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.

Answer 3

CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:

input {
    box-sizing: border-box;
    height: 15px;
}

This works for html select elements as well.

Answer 4

change:

*{
    line-height: normal !important;
}

or add something like:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

don't ask why)

and. safari need special fixes. but looks well

Answer 5

If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.

Answer 6

Usually one of these below has worked for me in the past using firefox browser.

 vertical-align: bottom;
  vertical-align: top;