ios - 圆圈内数字的 CSS，iOS 的位置已关闭

Question

我正在尝试为圆圈内的数字设置样式，但它在 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 of this example .我怎样才能让它在 iOS 上看起来一样？

我也尝试了各种其他 iOS 原生字体，但问题仍然存在。

Answer 1

center 不是 vertical-align 属性的有效值。同样，这个问题似乎不是 iOS 特有的，因为我在 Windows 7 上的 Chrome 上也遇到了这个问题，您的网站可能已被缓存。

解决此问题的一种方法(您的字体似乎太大而无法放入小容器)是简单地将跨度的高度增加到 12 像素:JSFiddle demo .

另一种方法是将 height:12px 替换为 line-height:10px。 JSFiddle demo .

这两种方法都会增加跨度的高度，我不确定这对您的情况是否有不良影响。