Css Firefox和WebKit之间的文本输入元素高度不一致

好吧，我意识到这是一个永恒的问题，但下面是：

我有一个文本输入

<input type="text" name="whatever" />

我已经指定了它的

字体系列

，

字体大小

和

填充

。然而，即使在同一台机器上（比如说我的Mac），Firefox（3.6）中的输入高度也与Chrome或Safari中的输入高度不同。具体来说，Firefox在文本下方添加了更多的填充

不，以像素为单位指定

高度也无法实现一致性

在Gecko和基于WebKit的浏览器（更不用说IE和Opera）中，有没有办法不借助JavaScript就实现文本输入高度的一致性？如果我必须使用JavaScript，是否有人已经设计了jQuery插件或其他东西来轻松实现这一点

更新：以下是不应该做的事情。该插件允许您对表单元素进行蒙皮，并保证它们在浏览器中的外观相同。以下是我的Mac上Chrome 5中的演示输入的外观：


以下是Firefox 3.6.4中相同输入的外观：


我没有以任何方式修改这些截图，只是裁剪了它们。现在，我的第一反应是，“啊，我不想支持Firefox。”但目前Firefox的用户比Safari和Chrome用户加起来还要多，所以这不是一个选项

有人，请帮帮我！我只是希望我的表单在符合标准的现代浏览器中看起来一样！通过“看起来一样”，我不是在谈论关于选择的
大纲
，或者诸如此类的东西；我只是在说有相同的宽度、高度和文本位置
 这个问题对你有帮助吗：

因此，您认为Fx3.6和Fx3.5之间有什么区别吗？
好的，如果您真的希望
元素在当前版本的Safari、Chrome和Firefox中看起来完全相同，那么这里有一个“解决方案”。请注意，我没有在Opera、IE或Mac OS以外的操作系统上测试过这一点；我相信还需要更多的黑客

我只需定义一个
，为输入提供背景，并为输入本身提供属性
background:none
，
border:0
，等等。换句话说，输入只是浮动文本。然后，我使用相对定位（具体地说，设置输入的
top
）将输入定位在背景上。这让我可以根据不同的浏览器自由调整它。具体来说，我发现基于Webkit的浏览器的输入文本比Firefox的高1倍，所以我添加了这一行

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

现在，Webkit和Firefox之间的输入看起来完全相同。是的，这是一个黑客程序，但它很有效。
如果（$.browser.webkit）{$（“.jqtransforminputiner div input”）.css（“padding top”，“10px”）；}
我手头没有Firefox 3.5，但我很确定，在3.6发布之前，我就看到了这种不一致性……我有一个类似的问题，输入更大，旁边有一个更大的按钮——无法协调Firefox、IE和Safari之间的对齐问题——我能做的最好是三分之一：(