Mac/win不同字體垂直位置

我在頁面上有非常簡單的元素 - 這是一個籃子的數量氣球，我無法正確設置。不僅字體是截然不同的，但它的垂直位置，像這樣的小元素顯著不同：Mac/win不同字體垂直位置

我試着從計算器一些解決方案（例如設置的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/

來源

2016-08-11 Martin

難道「只」是字體渲染？像這樣的CSS設置有助於正常化嗎？

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

來源

2016-08-11 12:57:33 munomono

你的問題只解決字體重量問題，而不是垂直位置問題，這在我的情況下更爲重要。我在我的問題結尾處張貼了一個JSFiddle鏈接，您可以自己嘗試。 – Martin

@Martin是的，答案是在黑暗中拍攝的，但是看起來好一些:)你可以嘗試用「display：inline-table;」來顯示。並檢查這一個在這裏：http://stackoverflow.com/questions/11726442/font-rendering-line-height-issue-on-mac-pc-outside-of-element – munomono

Mac/win不同字體垂直位置

回答

相關問題