html - 移动 safari 上的输入占位符间距

Question

更新:这是一个指向 minimum reproducible bug 的链接.运行说明在自述文件中

我在移动 Safari 中输入占位符下方的底部填充有问题。以下是输入占位符在移动版 Safari 中的样子:

这是输入占位符在 Chrome 上的样子:

如您所见，占位符文本和底部边框之间的空间存在显着差异。

我尝试按照其他一些 stackoverflow 答案的建议更改 line-height 并且我尝试更改 ::placeholder 上的 padding-bottom 带有适当的供应商前缀...我不确定还有什么可以尝试的。

Answer 1

我建议不要将 line-height 用于输入和按钮，因为它与主要浏览器不一致。而是使用高度和填充来使元素达到您想要的大小，但在这种情况下，一旦您删除了 line-height 属性，使用 margin 就足够了。