Разная высота линии и базовая линия на мобильных и настольных компьютерах

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 

Пожалуйста, обратите внимание, что я использую отступы для настройки высоты кнопок

UPDATE

Я только испытываемых в Мобильный браузер Firefox для Android, все работает просто отлично, только с Chrome

Answer 1

В коде отсутствует строка высоты.

Попробуйте установить определенную высоту линии. Кроме того, я предлагаю, чтобы вы центрировали текст по строкам, а не через прописку. Установите высоту линии с той же высотой, что и кнопка.

CSS

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

Это работает, конечно, только для текстов одной линии. Также посмотрите на this SO question

Answer 2

Вы указали медиа-запрос SPECIFICALLY для мобильных устройств? Вы можете добавить

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

, чтобы позаботиться о таких вещах.