html - 标准化 <LI> 内部文本和元素符号之间的距离

Question

最近注意到 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; }

Answer 1

如果您找不到 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>