Mac/win不同字体垂直位置

Question

我在页面上有非常简单的元素 - 这是一个篮子的数量气球，我无法正确设置。不仅字体是截然不同的，但它的垂直位置，像这样的小元素显著不同：

我试着从计算器一些解决方案（例如设置的line-height -1从字体大小），但没有运气。下面是代码：

HTML：

<span class="basket-qty">6</span> 

CSS：

.basket-qty { 
    display: block; 
    text-align: center; 
    background-color: #C1637D; 
    color: #fff; 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
    font-size: 13px; 
    font-weight: 500; 
    border-radius: 15px; 
    width:15px; 
    height:15px; 
} 

的jsfiddle：https://jsfiddle.net/e563tgdn/

Answer 1

难道 “只” 是字体渲染？像这样的CSS设置有助于正常化吗？

-webkit-text-size-adjust: none; 
text-size-adjust: none; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
-ms-text-size-adjust: 100%;