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

Question

检查这个 Jsfiddle首先。

这是我的 <input>有一个height of 10px;给了一个padding of 10px; ，我知道这不是赋予风格的正确方式。但是，它在 Chrome、IE 和 Safari 中运行良好，但当涉及到 Firefox 时，它会裁剪我的 placeholder 就另当别论了。 .为什么.?

我知道不同的浏览器有不同的渲染方法，但谁能告诉我这背后的确切原因，有没有办法解决这个而不改变高度、填充或字体大小(它应该不小于 14px).?

Answer 1

请检查它是否适用于 you

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