规范化<li>内部文本与项目符号

Question

最近发现，当<li>设置为list-style-position时，Chrome和Safari在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; }

Answer 1

如果您找不到Safari行为异常的解决方案/原因（或者是Chrome），您可以使用伪元素作为解决方法

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

关于@LGSon的回答，我建议使用counter() CSS函数和list-style-type的可选参数。

您可以使用disc值，但更灵活一点。 （参见下面的游乐场）。

CODE SNIPPET

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

PLAYGROUND：

decimal-leading-zero

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

lower-roman

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

接受的值：

MDN

  

disc，circle，square，decimal，decimal-leading-zero，lower-roman，   上罗马，低希腊，低拉丁，上拉丁，亚美尼亚，   georgian，lower-alpha，upper-alpha

更多信息：

有关CSS counter()函数的更多信息 here 。