输入文本高度在 safari 中被破坏

Question

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

这在 Firefox 和 Chrome 中一切正常。

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

似乎 line-height 没有正确应用于输入字段。有趣的是，它正确地应用于占位符。

我的代码：

网址：

<input type="text" placeholder="ABCD" value="ABCD">

css：

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

您可以使用此链接测试我的代码：https : //jsfiddle.net/0xsven/16z9Lr6t/

这是一个错误还是我错过了什么？

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

Answer 1

这是我的解决方案：

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

CSS

.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;
}

实时 jsFiddle - https://jsfiddle.net/16z9Lr6t/3/