Search code examples
cssgoogle-chromealignmenthtml-listsitems

Misaligned Ordered List Items in Chrome

Has anyone noticed that alpha ordered list items in certain fonts don't line up properly in Chrome?

Example: 

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>

The periods for items C, D and G are 1 pixel further to the left than the rest of the items.

Here's what I see in Chrome on Windows in case it's somehow limited to certain OS/browser/font versions:

Misaligned item example

Everything lines up fine in Firefox and IE. I have seen the problem in Chrome on Mac, Windows and Android. It does seem to depend on the font. Most serif fonts that I checked have a problem. Both lower and upper-alpha have the problem, but different items end up shifted by 1 pixel.

Any thoughts on how to fix this, or is this a bug that I just have to wait for Google to fix? I've done some searching, but can't find anyone else mentioning this issue.

Solution

  • Revisting this unanswered question 3 years later... I just tried the example code snippet again and everything's aligned perfectly in Chrome now, so it appears this was probably just a bug that has since been fixed.