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

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

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

更新

我刚刚在移动设备上安装了Firefox浏览器，只有Chrome才能解决所有问题

Answer 1

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

尝试设置特定的行高。另外我建议你通过行高而不是填充来居中你的文本。设置与按钮具有相同高度的行高。

<强> CSS

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

这当然仅适用于单行文本。 另请查看this SO question

Answer 2

您是否为移动设备指定了特定媒体查询？ 您可能需要添加

// you can use any other value of screen width mobiles use like 640, 768
@media (max-width:480px){
    line-height: 15px;  // The line height you want to show on mobile
}

Answer 3

并非所有浏览器都有默认值。我几乎总是养成在身体元素上设置样式的习惯

body{
 font-size: 100%;
 line-height: 1.333%;
}

照顾这样的事情。