用户输入时光标大小与文本大小不匹配

Question

我已将所有输入元素的字体大小和行高设置为 1.25。出于某种原因，在移动网络上（目前正在尝试使用 Android Chrome），闪烁的光标比文本本身短得多，并导致当用户主动输入时文本在中间被截断.用户退出输入后，实际文本本身就没问题了（不会被切断）。如何确保光标与文本的实际大小相匹配？我附上一张图片供参考。

在桌面网络浏览器（Windows、Mac + Chrome、Safari、Firefox）上完全没问题，我没有遇到这个问题，虽然在 Firefox 上很明显 Linux 弹出同样的问题。

到目前为止的代码：

.input-class {
  background-color: #eeeeee;
  border-color: transparent;
  border-radius: 10px;
  box-sizing: border-box;
  padding-left: 0.5rem;
  line-height: 1.25 !important;
  vertical-align: middle;
  width: 100%;
}

.input-class::placeholder {
  overflow: visible;
}

.input-class:focus {
  outline: none;
}

input {
  box-sizing: content-box;
  font-size: 1rem;
  padding: 0.5rem;
}

<input type="text" class="input-class">

如有任何意见，我们将不胜感激！

Answer 1

我在使用 Chrome 进行远程调试后发现了这个问题 - 如果您以后在移动设备上也遇到类似的问题，强烈建议您使用此方法。我使用的自定义字体不能很好地与 Chrome 上的输入和文本区域配合使用。我切换到更常见的字体，问题就消失了。

用户输入时光标大小与文本大小不匹配

Cursor size does not match text size when user is typing in input

html

css

browser