How do I correct the line-height inconsistency on input elements between webkit browsers and Firefox?

Is there a line-height discrepancy in Firefox that would be affecting the line-height on this input element? http://cure.org/cureki开发者_如何学运维ds/

You'll see in the signup form right in the middle of the page that my email a dress input field has the text vertically aligned very awkward, whereas in Chrome, Safari and IE (gasp) all is well.

What's causing this inconsistency in Firefox and how should I remedy it?

---

All browsers have a default style for many elements, and they are not at all consistent, so the best approach to it is using a CSS Reset style sheet to remove all those default CSS rules.

The only "disadvantage" is that after including a reset you may have to add a couple more of rules, as you might have used some of the browser's defaults styles, like heading sizes for example.

I have been using the YUI 3 CSS Reset and it works really well, but be sure of including it before your CSS.

---

on sponsor.css you have div#sponsor-notify-me input#email-field there this padding:10px 10px 0; just change this to padding:0 10px 0; and also change the height:32px; to height:42px;

---

Firefox and Webkit based browsers treat line-height differently and this affects input elements. One work-around that worked for me was to use the same values for line-height and height in the css properties for each element.

e.g.

#button{        
    vertical-align: middle;          
    line-height: 60px;
    height: 60px; /* Firefox needs this to be equal to height */
}

You could take a look at this issue as well: Font height changes between Firefox & Webkit browsers?