html - 移动端和桌面端的不同行高和基线

Question

这是我第三次遇到这个问题。

不知道怎么回事。 这是它的外观的两张图片:

在桌面上:

在移动设备上:

正如您在移动设备上看到的那样，文本未垂直居中对齐。

同样，此问题仅在移动设备上可见。

问题是什么？我错过了什么？这个问题在输入中也很明显。

我正在为按钮使用以下代码:

.button
  font-family: 'Gotham Pro', sans-serif
  font-size: 14px
  color: $color-text--button
  padding: 10px 15px
  text-transform: uppercase
  background: $color-button--default
  border: 1px solid $color-transparent

请注意，我使用 padding 来设置按钮的高度

更新

我刚刚在移动安卓 Firefox 浏览器中测试过，一切正常，只有 Chrome

有问题

Answer 1

您的代码中没有指定行高。

尝试设置特定的行高。此外，我建议您通过行高而不是填充使文本居中。设置与按钮高度相同的行高。

CSS

.button {
    height: 40px;
    line-height: 40px;
}

这当然只适用于单行文本。 也看看 this SO question