移动设备和台式机上不同的行高和基线答案

【问题标题】：Different line-height and baseline on mobile and desktops移动设备和台式机上不同的行高和基线
【发布时间】：2017-04-12 09:14:54
【问题描述】：

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

我不知道出了什么问题。这是它的外观的两张图片：

在台式机上：

在移动设备上：

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

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

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

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

.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 的问题

【问题讨论】：

我刚试过你的 CSS，在移动设备上没有问题。请发布重现问题的代码 sn-p，否则我们将无法处理。
尝试将 line-height 重置为 1 到 1.2 之间的某个位置。未设置/重置时，浏览器默认值可能会有所不同，因此 Chrome 可能会默认为其提供其他内容

标签： html css fonts baseline

【解决方案1】：

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

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

CSS

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

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

【讨论】：

但是为什么这在台式机上有效，我不想设置按钮的静态高度，使用填充更灵活
根据给定的信息很难猜测。也许 chrome 中存在导致问题的用户代理样式。您是否尝试设置固定的行高？
使用带静态高度的行高属性可以工作，但我不能这样做，我有按钮根据填充动态高度
@gzbuaapzroyn 正如我已经评论的那样，我们需要一个代码 sn-p 重现该问题才能给您正确的答案。

【解决方案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
}

【讨论】：

【解决方案3】：

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

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

处理这样的事情。

【讨论】：