Набивка на Ma c выглядит иначе, чем на Windows

Question

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

https://imgur.com/a/3XMkL9N - вот пример изображения

Подробнее см .: https://cobury.dk/

CSS / HTML Я использую:

i.icon-facebook, i.icon-instagram, i.icon-linkedin, i.icon-youtube {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 99px;
    background: #19191b;
    color: #fff;
    margin-right: 5px;
}

<div class="somefooter2"><a href="https://www.facebook.com/cobury" target="_blank" rel="noopener">[icon type="icon-facebook"]</a><a href="https://www.instagram.com/coburyagency/" target="_blank" rel="noopener">[icon type="icon-instagram"]</a><a href="https://www.linkedin.com/company/cobury/" target="_blank" rel="noopener">[icon type="icon-linkedin"]</a><a href="https://www.youtube.com/channel/UC6qwqVJl6ZodTBZraamdLLg" target="_blank" rel="noopener">[icon type="icon-youtube"]</a></div>

Отступы идеальны в Chrome на Windows, но выглядят странно в Chrome / Safari на Ma c. Как видите, я использую те же отступы сверху и снизу. Что мне не хватает? Это что-то о моих div? Высота линии? Ошибка?

Я использую платный шрифт Gilroy.

Answer 1

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

Вы можете включить что-то вроде normalize. css в свой проект или написать базовый c reset самостоятельно.