在输入标签和按钮中定位文本。 line-height 有时会被完全忽略

Question

我无法让我的某些按钮或输入在浏览器中看起来相同。文本的垂直定位通常是问题所在。我尝试了多种浏览器，Firefox (16) 只是忽略了我在 OSX 中的 line-height 并且在 Windows 中看起来仍然不同。

通常有 1 像素的差异，有时甚至更多。当您切换到 iPad 或其他移动设备时，这尤其是一个问题，它总是以某种方式看起来不同。 这是我的 CSS...

  margin         : 0px;
  padding        : 0px;
  font-size      : 15px;
  //height       : 15px; // Tried this too with unsatisfying results
  line-height    : 1;
  vertical-align : top;

我在没有使用 height-property 的情况下截取了屏幕截图

编辑：
所以我四处寻找更多信息，发现了一些类似问题的问题。
虽然没有人解决它...
-> 1 pixel line height difference between Firefox and Chrome
-> line-height 2px lower in firefox vs webkit

edit2：
此外，如果我制作一个 jsfiddle，我仍然会遇到问题，它有点不同，因为它与我正在处理的网站的上下文不同，但它仍然是行高/文本问题：
看这里：http://jsfiddle.net/XQ7VD/3/ 这是 OSX 上的 Chrome（左）和 Firefox（右）

edit3：
这是一个将行高设置为 18px 的屏幕截图（来自这个 jfiddle：http://jsfiddle.net/BJ8eR）

我刚刚看到 jsfiddle 按钮和悬停框有同样的问题！ xD
好的，我现在已经完成了屏幕截图...

--
如果有人知道技巧，请与我们联系。谢谢！

Answer 1

文本渲染在不同平台上的所有浏览器中是不同的——字体抗锯齿是完全不同的。所以很难得到像素完美的结果。根据我的经验，为大量浏览器设置输入/按钮元素的样式是一个主要的 PITA。尤其是移动 Webkit 在某些情况下是不可预测的。

如果您的 CSS 不是摘录，您可能需要添加 display:inline-block;。