CSS输入字段样式魔术

我试图以一种一致的方式设计一个输入字段和一些按钮的样式，但似乎有一些神奇的地方。事件虽然输入与按钮具有完全相同的类，但略高一些。此外，占位符文本的垂直对齐方式与输入文本不同（高出一个像素）。这可以通过跨浏览器解决吗

编辑：正如Jan Turoň所指出的，行高修复了Webkit中的问题。现在，如果你检查Firefox中的代码笔，你会发现元素仍然有1px的边框。如何摆脱它

Thx，PS

HTML

---

行高

不会将输入高度缩小到

字体大小

加上一些像素以下：

在替换的内联元素（如按钮或其他输入元素）上，行高没有影响

---

只需删除

行高度

，即使不应用

高度

样式，您也可以得到您想要的。将

行高设置为130%似乎也能起作用。
我几天来一直在尝试解决这个问题，但每个解决方案都不完整，而且不能在不同的浏览器中工作

我发现此代码可以完成以下工作：

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

我已经更新了代码笔-
将此行高度更改为17px，解决了输入更大时的垂直间距问题。。。可能还有另一种方法，我不建议在表单元素上使用顶部和底部填充。相反，使用绝对高度和正确的线高度来获得所需的效果。这样，无论你浏览哪个浏览器，它的高度都是一样的。
.btn, input, button {

  display: inline-block;
  vertical-align: middle;
  line-height: 15px;
  font-size: 15px;
  font-family: sans-serif;

  border: 0;
  padding: 0;
  margin: 0;

  cursor: pointer;
  cursor: hand;

  text-decoration: none;
  color: #f2f2f2;
  background-color: #1a1a1a;
  padding: 7px 12px 8px 12px;
  margin-right: 1px;
  margin-bottom: 1px;

}

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;