有没有人注意到某些字体的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修复的错误?我做了一些搜索,但找不到其他人提到这个问题。
2条答案
按热度按时间inb24sb21#
三年后再问这个没有答案的问题...我刚刚再次尝试了示例代码片段,现在一切都在Chrome中完美对齐,所以看起来这可能只是一个已经修复的bug。
iqxoj9l92#
在Chrome版本114.0.5735.133(官方版本)中似乎仍然是一个问题?
有序列表list-style-type:upper-alpha 1