在<input />中填充在Firefox和其他浏览器中显示2个结果

Question

首先检查此Jsfiddle。

我的<input>有一个height of 10px;已经给了padding of 10px;，我知道这不是给出风格的正确方法。但仍然，它在Chrome，IE和Safari 中完美运行，但它是另一个故事，当它来到 Firefox它会裁剪我的placeholder 。为什么。？< / p>

我知道不同的浏览器有不同的渲染方法，但有人能指出我背后的确切原因吗？有一种方法可以解决这个而不改变高度，填充或字体大小（它应该不低于14px）。？

Answer 1

请检查它是否适用于you

input {
 padding: 10px;
 font-size: 14px;
 font-weight: normal;
 width: 100%;
 line-height: 18px;
 height: auto;
}

Answer 2

他们以不同的方式计算高度和填充，试试这个。 仅使用高度或仅使用填充。在这里，我添加高度，只有x填充

input {
  font-size: 14px;
  font-weight: normal;
  width: 100%;
  height: 30px;
  padding: 0 10px;
}