如何解决Safari旧版本中输入框内容顶部无法消除的内边距问题？

在Safari 16.6及更低版本（macOS）、iOS/iPadOS 16及更低版本中，当HTML <input> 元素的font-size设置值大于自身height时，输入框内容顶部会出现无法移除的默认内边距。占位符（placeholder）初始状态下对齐方式与其他浏览器一致，但一旦在输入框中输入内容，就会出现同样的对齐偏移问题。Safari 17及iOS 17版本则与各版本Chrome表现一致，不存在该问题。

复现代码 #

HTML #

<input value="Test">
<input placeholder="Test">

CSS #

input {
  font-size: 50px;
  height: 40px;
  padding: 0;
}

已尝试的无效处理方式 #

• 移除浏览器默认的padding和margin
• 为输入框设置line-height属性
• 针对占位符添加样式：input::-webkit-input-placeholder{ padding-top: 0px; }

内容的提问来源于stack exchange，提问作者pajamas95