Safari“影子内容（用户代理）”导致输入内容被切断

Question

我在桌面 Safari（尚未检查移动设备）中遇到输入元素内容的顶部被截断的问题。父元素上没有填充，样式在其他浏览器中正确呈现。

我认为问题是由于 Safari 添加的作为输入的直接子元素的影子 div 元素，因为该影子 div 的计算样式的字体大小为 12px，而实际字体大小在输入为 16px。当我输入时，光标的高度为 12px。

我无法定位阴影 div 来覆盖字体大小。我尝试应用的任何样式都会被忽略。任何想法这个阴影元素用来计算它的样式，或者我如何定位将不胜感激。谢谢！！

Answer 1

更新：很高兴，一个简单的解决方案。对输入元素应用 line-height 解决了这个问题。

有趣的是，在我有这个错误的分支和另一个没有它的分支上，getComputedStyle() 为 lineHeight 返回的值是相同的：“正常”。我想它有助于明确使用 CSS。希望这对其他人有帮助。