手机和台式机上不同的行高和基线

我不知道什么是错的。下面是如何看起来两张图片所示：

在桌面上：

在移动设备上：

正如你可以在移动设备上看到的文字是不是垂直对齐中心。

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

什么问题？我错过了什么？这个问题在输入中也是可见的。

我使用下面的代码的按钮：

.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

请注意，我用的填充设置

我刚才在测试按钮

更新的高度手机安卓版火狐浏览器，一切正常，只用Chrome

来源

2016-11-28 gzbuaapzroyn

我刚刚尝试过您的CSS，并且在移动设备上没有问题。请发布重现问题的代码片段，否则我们无法使用。 – LGSon

尝试将“行高”重置为1到1.2之间的某个位置。当没有设置/重置浏览器的默认设置可能会有所不同，所以Chrome可能会给它其他东西，默认情况下 – LGSon

代码中没有指定行高。

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

CSS

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

这仅适用于单行文字作品，当然。也看看this SO question

来源

2016-11-28 15:40:44 chillwalker

但为什么这在桌面上工作，我不想设置按钮的静态高度，使用填充更灵活 – gzbuaapzroyn

With给出的信息很难猜测。也许在chrome中有一个用户代理风格导致了这个问题。你有没有尝试设置一个固定的行高？ – chillwalker

使用静态高度线height属性它的工作原理，但我不能做到这一点，我有按钮动态高度根据填充 – gzbuaapzroyn

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

// 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 
}

来源

2016-11-28 15:41:38 Ojanti

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

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

照顾这样的事情。

来源

2016-11-28 22:33:34 jjeining

手机和台式机上不同的行高和基线

回答

相关问题