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://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)

css:

* {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    line-height: 15px;
    border: none;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
}

#search .text, #search .button {
   border: 1px solid red;
}

html:

<form method="post" id="search" action="">
    <p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>

this is how firefox renders:

this is how chrome renders:

i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example. in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.

Answer 1

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 2

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 3

Try By giving

.text{
 border:0px;   
}

Answer 4

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

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