Html safari中的输入文本高度被打断

我希望创建一个文本输入，其中文本垂直填充整个输入字段。如下图所示：

这在Firefox和Chrome中都能正常工作

在Safari中，我看到了这个问题：

似乎输入字段的行高度应用不正确。有趣的是，它被正确地应用于占位符

我的代码：

Html:

您可以使用以下链接测试我的代码：

这是一个错误还是我遗漏了什么

---

编辑：我在Mac OS上，使用Safari 10.0.2

请勿在任何行级标记中使用行高属性；仅适用于块级别标记

---

行高

仅指定文本的边界，而不指定文本在该框中的实际位置

尝试设置（或其他值，现在无法测试）。

这是我的解决方案：

<div class="text-box">
<input type="text" placeholder="ABCD" value="">
</div>
<div class="text-box">
<input type="text" placeholder="ABCD" value="ABCD">
</div>

---

Live JSFIDLE-

>在未替换的内联元素上，行高指定用于计算行框高度的高度。@kuba：谢谢回答。卸下测线高度传感器后，问题依然存在。（将更新标题。）你能给我一个解决问题的提示吗？@Justinas“未替换”是什么意思？编辑：但这对我有什么帮助呢？这是有效的。非常感谢。你会说这是Safari中的一个bug吗？@Sven Safari不懂“线高”。我认为这是这款浏览器的一个特点

input {
  padding: 0;
  margin: 0;
  border: 0 none;
  height: 140px;
  line-height: 140px;
  width: 600px;
  font-size: 185px;
}

<div class="text-box">
<input type="text" placeholder="ABCD" value="">
</div>
<div class="text-box">
<input type="text" placeholder="ABCD" value="ABCD">
</div>

.text-box input {
  padding: 0;
  margin: 0;
  border: 0 none;
  background: none;
  font-size: 185px;
  position: relative;
  top: -47px;
}

.text-box {
  background:#fff;
  height: 140px;
  width: 600px;
  overflow: hidden;
}