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 以外的操作系统上对此进行测试；我确信需要额外的技巧。

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

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

现在，Webkit 和 Firefox 的输入终于看起来完全一样了。是的，这是一个黑客行为，但它确实有效。