Chrome中未对齐的有序列表项

gudnpqoy  于 2023-06-19  发布在  Go
关注(0)|答案(2)|浏览(175)

有没有人注意到某些字体的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中看到的内容,以防它以某种方式限于某些OS/浏览器/字体版本:

在Firefox和IE中一切都很好。我在Mac、Windows和Android上的Chrome中看到过这个问题。这似乎取决于字体。我检查的大多数衬线字体都有问题。lower和upper-alpha都有问题,但不同的项目最终会移动1个像素。
有什么想法可以解决这个问题吗?或者这是一个我只需要等待Google修复的错误?我做了一些搜索,但找不到其他人提到这个问题。

inb24sb2

inb24sb21#

三年后再问这个没有答案的问题...我刚刚再次尝试了示例代码片段,现在一切都在Chrome中完美对齐,所以看起来这可能只是一个已经修复的bug。

iqxoj9l9

iqxoj9l92#

在Chrome版本114.0.5735.133(官方版本)中似乎仍然是一个问题?
有序列表list-style-type:upper-alpha 1

相关问题