Блог

Недавно заметил, что Chrome и Safari имеют разное расстояние по умолчанию между текстом внутри <li> и маркером, когда list-style-position установлено значение inside :

Вопрос в том, как нормализовать это расстояние до чего-то равного в обоих браузерах, не используя background-image технику, которая очень уродлива?

Версия Chrome 53.0.2785.143 (64-разрядная), Safari версии 10.0 (11602.1.50.0.10)

PS. Код списка из скриншотов:

 ul { list-style-position: inside; margin: 0; padding: 0; }
ul > li { margin: 0; padding: 0; }
  

Если вы не найдете решения / причины, по которой Safari плохо себя ведет (или это Chrome), вы можете использовать псевдоэлемент в качестве обходного пути

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul li {
    margin: 0;
    padding: 0;
}
ul li::before {
    content: '•';
    margin-right: 10px;
}  

 <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>  

Следуя ответу @LGSon, я бы рекомендовал использовать counter() функцию CSS с необязательным параметром list-style-type .

Вы можете использовать disc значение, но это требует немного большей гибкости. (Смотрите игровую площадку ниже).

ФРАГМЕНТ КОДА:

 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: list-item;
}
ul li {
  margin: 0;
  padding: 0;
  counter-increment: list-item;
}
ul li::before {
  content: counter(list-item, disc);
  margin-right: 10px;
}  

 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>  

ИГРОВАЯ ПЛОЩАДКА:

 decimal-leading-zero
  

 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: list-item;
}
ul li {
  margin: 0;
  padding: 0;
  counter-increment: list-item;
}
ul li::before {
  content: counter(list-item, decimal-leading-zero);
  margin-right: 10px;
}  

 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>  

 lower-roman
  

 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: list-item;
}
ul li {
  margin: 0;
  padding: 0;
  counter-increment: list-item;
}
ul li::before {
  content: counter(list-item, lower-roman);
  margin-right: 10px;
}  

 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>  

Принятые значения:

MDN

диск, круг, квадрат, десятичная дробь, десятичный начальный ноль, строчный римский, верхний римский, нижний греческий, нижний латинский, верхний латинский, армянский, грузинский, нижний альфа, верхний альфа

Подробная информация:

Больше информации о counter() функции CSS здесь.