Почему кнопки в Safari и Chromе отображаются по-разному?

Question

[Eugenemilka]

Кто-то может объяснить почему в Safari и Chromе текст внутри кнопки находится на разной высоте? Раньше было одинаково, если взять одну из кнопок и вынести в отдельный файл с их свойствами, то получается везде одинаково. Не могу понять, какое свойство портит их в Хроме. Помогите, пожалуйста. Уже месяц не могу найти проблему. Раньше было ровно все, на каком этапе верстки стало криво, не помню(
Сайт: lisamor.com

Comments

[Шохрух Шаймардонов]

Будет лучше, если скинете код этой кнопки, чтобы не тыкать пальцем в небо

[Rustam Bainazarov]

Шохрух Шаймардонов, он ссылку на сайт дал выше.

[Rustam Bainazarov]

Eugenemilka, добавьте это:
line-height: 1;

Как универсальное решение.

[Шохрух Шаймардонов]

Рустам Байназаров, это я уже видел. Но к сожалению в данный момент нет возможности инспектить сайт. Так то по css можно было б понять что к чему

[Rustam Bainazarov]

Ну или вот так:

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header__buttons > * {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    cursor: pointer;
}

.contact-now {
    width: 200px;
    max-width: 200px;
    background-color: #fff;
    color: #454242;
    text-transform: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 100px;
}

.see-more {
    margin-left: 30px;
}

Answer 1

[Алекс Глебов]

height: 40px; лишнее

Answer 2

[profesor08]

Посмотри внимательно на кнопку в инспекторе, ничего подозрительного не замечаешь? Обрати внимание на высоту строки, она выше чем нужно буквам, но выравнивание по вертикали будет происходить относительно строки, а не букв. Поэтому задай высоту строки поменьше для кнопки:
line-height: 1; либо line-height: 100%;

Comments

[tendkuh]

ничего подозрительного не замечаешь? Обрати внимание на высоту строки

Подскажите, где в инспекторе посмотреть высоту строки?

[profesor08]

tendkuh, справа в Computed Styles, если нету, значит не задан и каждый браузер отталкивается от своего значения по умолчанию.

[tendkuh]

profesor08, какой CSS фреймворк посоветуете, где учтены все подобные тонкости, чтобы не вникать в стили браузеров по умолчанию и т.д. ведь подобные косяки всегда "вылазят" отосвюду, в самых неожиданных местах?

[profesor08]

Любой. А для сброса и стандартизации стилей есть - https://necolas.github.io/normalize.css/