在基于 Chromium 的浏览器中使用"text-align: center"时如何避免文本轻微偏移？

Question

我正在设计一个使用纯HTML和CSS的页面。我注意到，当两个元素相邻时，右边的元素显示为inline-block，如果设置了text-align: center而具有固定的宽度，则只有当左边的元素具有特定的宽度时，文本中才会有轻微的偏移。

这是我设置的一个演示:https://jsfiddle.net/jkswLunt/115/。
请尝试改变左侧元素的内容(添加/删除字符)，注意在某些宽度下问题会消失。这是一个并排比较，这是我制作的页面的结果。这个效果几乎不明显，但它让我很困扰。

body {
font-family: Sans-serif;
}
#l {
vertical-align: middle;
}
#r {
margin-left: 6px;
display: inline-block;
width: 12px;
height: 12px;
padding: 2px;
background-color: black;
color: white;
text-align: center;
vertical-align: middle;
line-height: 1;
}

<span id="l">iiiiiiii</span><span id="r">i</span>

这种情况只发生在我的Chrome, MS Edge(一个用铬)和电子渲染器(使用铬)。在Firefox上测试没有发生，所以我认为这是Chromium的问题。

找了一段时间，我没有找到任何关于这个的信息。我也试过在右边的元素周围包装一个div，将所有的属性转移到它，但问题仍然存在。

是否有办法解决这个问题?

Answer 1

这是因为你给了#r一个height。而#l没有height。从#r中删除height

body {
font-family: Sans-serif;
}
#l {
vertical-align: middle;
}
#r {
margin-left: 6px;
display: inline-block;
width: 12px;
/*   height: 12px; */
padding: 5px;
background-color: black;
color: red;
text-align: center;
vertical-align: middle;
line-height: 1;
}

<span id="l">iiiiiiii</span><span id="r">i</span>

在Codepen上查看:https://codepen.io/manaskhandelwal1/pen/ExNNmQJ