我正在尝试为圆圈内的数字设置样式,但它在 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 原生字体,但问题仍然存在。
最佳答案
center
不是 vertical-align
属性的有效值。同样,这个问题似乎不是 iOS 特有的,因为我在 Windows 7 上的 Chrome 上也遇到了这个问题,您的网站可能已被缓存。
解决此问题的一种方法(您的字体似乎太大而无法放入小容器)是简单地将跨度的高度增加到 12 像素:JSFiddle demo .
另一种方法是将 height:12px
替换为 line-height:10px
。 JSFiddle demo .
这两种方法都会增加跨度的高度,我不确定这对您的情况是否有不良影响。
关于ios - 圆圈内数字的 CSS,iOS 的位置已关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16815848/