Possible input padding bug in Firefox

css, font-size, input, padding

Solution

Perhaps you should use a fixed height on the element, rather than relying on padding and font size to calculate the height: http://jsfiddle.net/sN7aH/

#amount {
    font-size: 18px;
    background-color: #fcfcfd;
    font-family:'Montserrat', sans-serif;
    color: #bbc2cb;
    float: left;
    width: 312px;
    height: 50px;
}

I see no differences here using that on ff and chrome

Problem

I have three main elements on my page. Two spans and an input field. All three elements have the same padding and font-size, but the input field is taller than the two spans by one pixel (in Firefox). It looks perfectly fine in Chrome. This "bug" may be because I'mm using Google Web Fonts, but I want to know what you guys think the issue is. Here's the fiddle Open it in Chrome and Firefox and compare! I've tried: ``` vertical-align: top; (middle, and bottom) max-height: 50px; line-height:; overflow: hidden; ``` I also tried to change the font-size on the input field, it then fixes the problem in Firefox, then the problem occurs in Chrome... it never ends!

Original source