在输入标签和文本中定位文本纽扣。行高有时会被忽略

Question

我不能让我的一些按钮或输入在浏览器中看起来一样。文本的垂直定位通常是问题所在。我尝试了多种浏览器，Firefox（16）在OSX中忽略了我的行高，在Windows中看起来也不同。

通常有1px的差异，有时甚至更多。当您切换到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的情况下拍摄了截图

编辑：
所以我四处寻找更多信息，并发现了一些类似问题的问题 虽然没有人解决它... - ＆GT; 1 pixel line height difference between Firefox and Chrome
- ＆GT; 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
好的，我现在已经完成了屏幕检测...

-
如果有人知道诀窍，请与我们联系。 THX！

Answer 1

在各种平台上的所有浏览器中，文本呈现都是不同的 - 字体抗锯齿是完全不同的。因此很难获得像素完美的结果。根据我的经验，大量浏览器的样式输入/按钮元素是主要的PITA。特别是移动Webkit在某些情况下是不可预测的。

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