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

Question

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

这在Firefox和Chrome中运行良好。

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

似乎输入字段未正确应用行高。有趣的是它适用于占位符。

我的代码：

HTML：

<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/

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

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

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/

Answer 2

不要在任何行级标签中使用line-height属性;仅适用于块级标签。

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Answer 3

line-height仅指定文字的边界，而不是该框中的实际文字展示位置。

尝试设置vertical-align: middle（或其他一些值，目前无法测试）。