移动设备和桌面设备上的不同行高和基线

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

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

更新

我刚刚在移动 Android Firefox 浏览器中进行了测试，一切正常，问题仅在于Chrome

Answer 1

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

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

CSS

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

当然，这仅适用于单行文本。另请看看这个问题