html - Safari "Shadow Content (User Agent)"导致输入内容被截断

Question

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

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

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

Answer 1

更新:令人高兴的是，这是一个简单的解决方案。对输入元素应用行高解决了这个问题。

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