Chrome добавляет пробелы в навигацию по сайту, а Safari - нет

Question

У меня проблема с браузером Chrome, который добавляет лишние пробелы в навигационную ссылку и вызывает ее вывод за пределы строки.Это относится к Chrome, так как навигация отображается так, как ожидается в Safari и Firefox.Вот страница с вопросом https://www.mamapedia.com/n/household

Вот снимки экрана точного выпуска

Chrome:

Пример заголовка в браузере Chrome

Safari:

Пример заголовка в браузере Safari

Эта проблема возникает для этой навигации на многих похожих страницах, но, как ни странно, не на всех.Например, https://www.mamapedia.com/n/pregnancy отображает навигацию как ожидается во всех браузерах.Страницы, по сути, одинаковы, но разного содержания, но логика и CSS одинаковы.

Кто-нибудь знает, что может вызвать эту проблему конкретного браузера?

Answer 1

Каждый браузер может выбирать, как отображать вещи, включая пробелы.Вот почему разные браузеры отображают вещи по-разному.

Попробуйте использовать нормализующий файл, например normalize.css , чтобы сделать браузеры более согласованными.

В вашем случае ваш <li> Тег имеет кучу пробелов, которые игнорирует сафари, и отображает хром.Если вы не хотите использовать normalize.css или это не поможет, у вас есть еще два варианта решения вашей конкретной проблемы.

Опция 1:

Вы можетелибо удалите пробел, чтобы он стал <li>Household</li>

Вариант 2:

Или вы можете добавить правило css, чтобы явно игнорировать пробел.

Правило CSS будет:

li{
    white-space: nowrap;
}