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

Question

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

我相信这个问题是由于 Safari 添加了一个阴影 div 元素，它是输入的直接子元素，因为该阴影 div 的计算样式的字体大小为 12px，而输入上指定的字体的实际大小为16 像素。当我打字时，光标的高度为 12px。

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

Answer 1

更新：幸运的是，这是一个简单的解决方案。对输入元素应用行高解决了这个问题。

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