Chrome中未对齐的有序列表项答案

【问题标题】：Misaligned Ordered List Items in ChromeChrome中未对齐的有序列表项
【发布时间】：2018-11-15 05:30:36
【问题描述】：

有没有人注意到某些字体的 alpha 排序列表项在 Chrome 中没有正确排列？

示例：

li 
{ 
  font-size: 20px;
  font-family: sans-serif;
  list-style: upper-alpha;    
}
ol:after
{
  content: '';
  position: absolute;
  top: 0; left: 2.45em;
  height: 100%;
  width: 1px;
  background: black;
}

<ol>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
   <li>Testing</li>
</ol>

项目 C、D 和 G 的句点比其余项目左 1 个像素。

这是我在 Windows 上的 Chrome 中看到的内容，以防它以某种方式受限于某些操作系统/浏览器/字体版本：

在 Firefox 和 IE 中一切正常。我已经在 Mac、Windows 和 Android 上的 Chrome 中看到了这个问题。它似乎确实取决于字体。我检查的大多数衬线字体都有问题。下阿尔法和上阿尔法都有问题，但不同的项目最终移动了 1 个像素。

关于如何解决此问题的任何想法，或者这是一个我只需要等待 Google 修复的错误吗？我做了一些搜索，但找不到其他人提到这个问题。

【问题讨论】：

可能这只是浏览器无法控制的微小差异之一。 FWIW，您的 sn-p 在我的 MacOS 版 Chrome 上正确显示（没有像素错位）。
是的，我的假设是这是一个 Chrome 错误。希望他们尽快修复它。我刚刚在 Android 上尝试过 Chrome，它也遇到了同样的问题。我还没有找到正确显示的 Chrome 版本。我想知道您的 Chrome 是比我的新版本还是旧版本。感谢您的检查！

标签： css google-chrome alignment html-lists items

【解决方案1】：

3 年后重新审视这个悬而未决的问题......我刚刚再次尝试了示例代码 sn-p，现在所有内容在 Chrome 中都完美对齐，所以看起来这可能只是一个已经修复的错误。

【讨论】：