Inconsistent height of text input elements between Firefox and WebKit
- by Trevor Burnham
OK, I realize that this is something of an eternal question, but here goes:
I've got a single text input,
<input type="text" name="whatever" />
and I've specified its font-family, font-size and padding. Yet, even on the same machine (my Mac, let's say), the input has a different height in Firefox (3.6) than it does in Chrome or Safari. Specifically, Firefox adds a little bit more padding below the text.
And no, specifying height in pixels doesn't achieve consistency either.
Is there any way to achieve text input height consistency across Gecko- and WebKit-based browsers (let alone IE and Opera) without resorting to JavaScript? And if I must use JavaScript, has someone already devised a jQuery plugin or something to easily do this?
Update: Here's what not to do. The jqTransform plugin lets you skin form elements and promises that they'll look the same across browsers. Here's how the demo input looks in Chrome 5 on my Mac:
and here's how the same input looks in Firefox 3.6.4:
I haven't altered these screenshots in any way, just cropped them. Now, my first reaction is, "Ugh, I don't want to support Firefox." But there are currently more Firefox users than Safari and Chrome users combined, so that's not an option.
Someone, please help! I just want my forms to look the same across modern, standards-compliant browsers! And by "look the same," I'm not talking about the outline on selection or anything like that; I'm just talking about having the same width, height, and text placement!
