Блог

Главная - Вопросы по программированию - Проблема с браузером Safari HTML CSS

Проблема с браузером Safari HTML CSS

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я только что столкнулся с проблемой. Мой Chrome показывает мою навигацию следующим образом:

введите описание изображения здесь

Но мой Safari показывает это следующим образом:

введите описание изображения здесь

Код:

 #header{
    display: grid;
    width: 70%; margin: 0 auto;
    margin-top: 1%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'header-left header-right';
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    color: grey;
    margin-top: 2em;

}
#header-left{
    grid-area: 'header-left';
    text-align: left;
    color: white;
}

#header-right{
    grid-area: 'header-right';
}
#header-right a {
    text-decoration: none;
    color: grey;
}
#about h2,p{
    text-align: left;
}

Не могу найти никаких исправлений для этого. Есть идеи?

Комментарии:

1. Может быть, попробуйте явное font-size вместо того, чтобы оставлять это браузеру решать, что означает «x-large».

2. @Pointy не проблема

3. Вы пробовали это? На самом деле, что вы пробовали? Какие эксперименты вы проводили?

4. Просто попробовал, установив для него несколько фиксированных размеров. Своего рода плохая ситуация, поскольку это проблема с браузером, но я не могу оставить это, поскольку это также может быть замечено пользователями Mac

5. это не проблема браузера — это разница. Кто скажет, какой из них правильный, а какой неправильный — вы пробовали указывать семейство шрифтов и проверять, какой шрифт действительно используется? Кроме того, вы убедились, что ваш просмотр на 100% в каждом браузере? Браузеры, как правило, «запоминают» любые настройки масштабирования для каждого сайта

Ответ №1:

Исправлено путем добавления display: inline-block; в nav a {}

Комментарии:

1. вау … как это изменит размер текста? Если только опубликованные вами изображения не являются истинным отражением проблемы (похоже, что текст в Safari больше, чем в Chrome)… боже… о, подождите — это артефакт встраивания изображений сюда!! Действительно, казалось, что размер шрифта был другим!