h5元素行高等于其高度,在安卓系统下文字无法居中的问题(苹果正常)
徽章的样式:
.my-badge
display: inline-block;
vertical-align: middle;
min-width:20px;
height: 20px;
line-height: 20px;
padding: 0 5px;
border-radius: 20px;
font-size:10px;
text-align: center;
color:#fff;
background: #f00;
}
如下图的徽章文字:
'6'数字明显偏上
解决方案:
把字体大小改为12px就可以了
.my-badge{
display: inline-block;
vertical-align: middle;
min-width:20px;
height: 20px;
padding: 0 5px;
border-radius: 20px;
line-height: 20px;
font-size:12px;
text-align: center;
color:#fff;
background: #f00;
}
注意: 有好些设备不太兼容12px以下的字体!