css - 像素显示不均

对不起，我什至无法表达地描述这个问题，我面临这个问题，屏幕上的这些数字不会出现在同一行，即使它们具有相同的高度、相同的字体大小和相同的行高度。

逐渐增加字体大小似乎可以解决字体大小为 3 的倍数的问题，否则它仍然会有这个烦人的偏移量。好像问题只是关于浏览器尽力估计该像素应该在哪里但略有失败。

此问题仅在 Firefox 上发生，相同的组件似乎在 Chrome 上运行良好。

您可以在此处进一步查看元素https://ant.design/components/badge

标签： cssreactjspixelscreen-resolution

为数字使用另一种字体。

Ant 设计徽章创建从 0 到 10 的所有数字来显示动画。这些是隐藏的，但在徽章上方/下方的 dom 中可见，但被溢出隐藏。如果您手动调整字体大小，您还需要修复行高/数字高度，以便所有不可见的数字正确对齐。