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

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

任何意见表示赞赏！

标签： htmlcssbrowser

Answer 1

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