CSS有序列表序号垂直对齐异常问题排查与修复

今天在WordPress站点的文章里碰到了一个从没见过的CSS问题：页面里有两个独立的有序列表，第一个列表没有锚点标签（<a>），序号和文本是正常的顶部对齐；但第二个列表里的文本被<a>标签包裹后，序号“1”却和文本底部对齐了，完全不符合预期。

更头疼的是主题的主CSS文件未压缩后有几千行，一时半会儿根本找不到问题根源，而且之前从没见过这种列表样式，不知道该从哪些CSS特性入手排查，只好来求助。

后来终于找到了控制这个样式的CSS代码块：

body.single .single-inner-wrapper article#single-article .entry-content a { 
    color: #41b5f9; 
    position: relative; 
    line-height: 1.2; 
    display: inline-block; 
    z-index: 1 
}

经过G-Cyr的建议，我在这段代码里添加了vertical-align: top属性，修改后的代码如下：

body.single .single-inner-wrapper article#single-article .entry-content a { 
    color: #41b5f9; 
    position: relative; 
    line-height: 1.2; 
    display: inline-block; 
    z-index: 1;
    vertical-align: top;
}

添加之后，第二个列表的序号立刻就和文本顶部对齐了，完美解决了问题！

非常感谢所有提供帮助的朋友！

内容的提问来源于stack exchange，提问作者Mark