CSS表示圆圈内的数字，iOS的位置为off

我试图在圆圈内设计数字样式，但在Chrome上看起来和在iOS上不一样

Chrome预览

iOS预览

请注意，数字并非垂直居中于iOS上

是的，我尝试添加

垂直对齐：中心但它不会起作用

这是我的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>

5
15
125

这是一本书。我怎样才能使iOS的外观相同

我还尝试了iOS自带的各种其他字体，但问题仍然存在。
尝试设置
行高：1em
居中
不是
垂直对齐
属性的有效值。同样，这个问题似乎不是iOS特有的，因为我在Windows7上的Chrome上也有这个问题，你的站点可能被缓存了

解决此问题的一种方法（您的字体看起来太大，无法装入小容器）是简单地将跨距的高度增加到12px:

另一种方法是将
高度：12px
替换为
行高：10px

这两种方法都会增加跨度的高度，我不确定这对你来说是否是一种不良影响。
垂直居中一直都是一种巨大的痛苦。我喜欢使用表格单元格，它们似乎是解决这个问题的一个公平的跨浏览器解决方案。再说一次，我自己也只是个傻瓜

我要做的是：

/* Not even touching this */
.circle {
  display: inline-block;
  text-decoration: none;
  width: 20px;
  height: 10px;
  padding: 3px;
  background: #7DBCD8;
  border: 1px solid #599DBB;
  color: #FFF;
  text-align: center;
  margin: 3px 3px 0 0;
  font: 10px Arial, sans-serif;
  border-radius: 999px;
}

/* to make your sub-span in to a table */
.circle > span {
  display:table;
  width:100%;
  height:100%;
}

/* to make your sub-sub-span in to a table cell */
.circle > span > span {
  display:table-cell;
  vertical-align:middle;
}

及


5.
5.
5.

如果这确实是你的问题，这将使你的数字垂直对齐…
我的电脑上的Chrome（Win7，最新的Chrome）有点不对劲：使用下面的技巧：
font:10px/11px Arial，Helvetica，sans serif类似，但看起来好一点。谢谢你的帮助！
<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>