Safari 垂直未对齐输入字段的值，并且不允许我使用填充

Question

我正在使用 Angular 为我们的网站创建过滤器。其中一个过滤器是视频长度过滤器，您可以在其中输入所需的长度（以分钟为单位）。输入字段有以下样式（Stylus）：

border: 1px solid rgba(85, 85, 71, .5)
border-radius: 5px
color: #009090
display: block
font-size: 58px
height: 56px
line-height: 72px
margin-top: 40px
padding-bottom: 10px
width: 96px

&:focus
  border: 1px solid #009090
  outline: none

它在 Chrome 和 Firefox 中按预期工作：

但 Safari 无法对齐内容：

以 Chrome 和 Firefox 为中心的 padding-bottom 似乎对 Safari 没有影响（无论如何，10px 的影响比 Safari 上发生的巨大错位要小）。我还尝试了行高、字体大小、边距和内边距的所有可能组合，但没有成功。

奇怪的是，闪烁的光标在 Safari 中似乎很好地对齐，当没有放入任何内容时：

尽管输入未对齐，但光标仍保持垂直居中：

Safari 似乎在输入字段中添加了一个 "Shadow-Content (User Agent)"，该字段对齐良好（但无论如何都很奇怪，因为输入元素不能有子元素）：

只要我输入一些内容，输入就会再次错位，并且不允许我设置 shadow-DOM 内容的样式（注意开发人员工具中的小锁）：

我真的不知道如何在 Safari 的输入中垂直居中文本。有人遇到过同样的问题吗？

Answer 1

这是由于height 和line-height 之间的差异造成的：

height: 56px
line-height: 72px

那样的话，这条线不适合容器。 line-height 最高应与​​height 一样高，最好与font-size 相同。填充也会增加高度，因此请相应地调整这些值。