我正在尝试在圆圈内设置数字样式,但它在 Chrome 中的外观与在 iOS 上的外观不同。
在 Chrome 上预览
在 iOS 上预览
请注意,这些数字不是垂直居中于 iOS 上的。
是的,我已经尝试添加vertical-align: center;
,但它不会成功。
这是我的 CSS
.circle {
display: inline-block;
text-decoration: none;
width: 20px;
height: 10px;
padding: 3px;
background: #7DBCD8;
border: 1px solid #599DBB;
color: #FFF;
text-align: center;
vertical-align: top;
margin: 3px 3px 0 0;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
与 HTML
<span class="circle">5</span>
<span class="circle">15</span>
<span class="circle">125</span>
这是此示例的 JS Fiddle。我怎样才能让它在 iOS 上看起来一样?
我还尝试了 iOS 原生的各种其他字体,但问题仍然存在。