Inconsistent height of text input elements between Firefox and WebKit

Question

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!

Answer 1

OK, here's a "solution" that I worked out if you really want <input type="text"> elements to look exactly the same in the current versions of Safari, Chrome and Firefox. Note that I haven't tested this in Opera or IE, or on operating systems other than Mac OS; I'm sure additional hacks would be needed.

I simply define a <div> to provide the background for the input, and give the input itself the properties background: none, border: 0, etc. In other words, the input is just floating text. Then I position the input over the background by using relative positioning (specifically, setting the input's top). That leaves me free to adjust it for the different browsers. Specifically, I found that the input text was 1px higher in Webkit-based browsers than in Firefox, so I added the line

if ($.browser.webkit) { $input.css('marginTop', 1); }

Now the input finally looks exactly the same between Webkit and Firefox. It's a hack, yes, but it works.