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

Question

好的，我意识到这是一个永恒的问题，但这里有：

我有一个文字输入，

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

我已指定其font-family，font-size和padding。然而，即使在同一台机器上（我的Mac，让我们说），Firefox（3.6）中的输入高度与Chrome或Safari中的高度不同。具体来说，Firefox在文本下方添加了一些填充。

不，以像素为单位指定height也不会达到一致性。

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

更新：以下是不该做的事情。 jqTransform插件允许您对表单元素进行外观处理，并承诺它们在浏览器中看起来相同。以下是我的Mac上Chrome 5中演示输入的外观：

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

我没有以任何方式更改这些屏幕截图，只是裁剪了它们。现在，我的第一反应是，“呃，我不想支持Firefox。”但目前Firefox用户数量远远超过Safari和Chrome用户，因此这不是一个选择。

有人，请帮忙！我只希望我的表单在现代的，符合标准的浏览器中看起来一样！并且“看起来一样”，我不是在谈论选择上的outline或类似的东西;我只是在讨论相同的宽度，高度和文字位置！

Answer 1

好的，如果您真的希望<input type="text">元素在当前版本的Safari，Chrome和Firefox中看起来完全相同，那么这就是我的解决方案。请注意，我没有在Opera或IE或Mac OS以外的操作系统上测试过这个;我确定需要额外的黑客攻击。

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

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

现在输入最终看起来与Webkit和Firefox完全相同。这是一个黑客，是的，但它确实有效。

Answer 2

这个其他问题对您有帮助吗：Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back?？

因此，你认为fx 3.6和Fx3.5-？

之间有什么区别吗？

Answer 3

if（$ .browser.webkit）{$（“。jqTransformInputInner div input”）。css（“padding-top”，“10px”）;}