<ul> Boostrap список отображается в Safari по-разному

Question

У меня есть простой неупорядоченный список в Bootstrap 4:

<ul>
 <li>line 1</li>
 <li>line 2</li>
 <li>line 3</li>
 <li>line 4</li>
 <li>line 5</li>
</ul>

с этим пользовательским CSS:

ul, ol {
  padding-left: 1rem;
}

li {
  margin-bottom: 1rem;
}

Но они отображаются по-разному на Firefox и Safari

Firefox

Safari

Я заметил, что Bootstrap использует псевдоэлемент :: marker вместо :: before, могу ли я изменить его так, чтобы он был более совместим с Safari?

Answer 1

Это может не быть проблемой Bootstrap. Я нашел несколько решений, которые могут работать:

1. Это может произойти, если кодировка не установлена ​​правильно. Попробуйте добавить @charset "UTF-8"; в первую строку кода CSS.

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

3. Вы можете добавить нестандартные маркеры с помощью CSS, добавив list-style: none; к элементу ul и затем добавьте пулю с ::before на элемент li.

Answer 2

Это может быть связано с ошибкой браузера в Safari. Я нашел один в https://getbootstrap.com/docs/3.4/browser-bugs/, который относится к блокам rem (ошибка WebKit # 156684).