安卓浏览器超小字体上浮

问题描述

在安卓系统上，尤其是x5内核的微信内置浏览器。对一个元素设置了line-height等于height垂直居中，但是在Android的浏览器上字体总会偏上一点。比如下面这样a重的文字不会垂直居中

a {  
    font-size:10px;
    line-height:13px; // a的高度
}

原因分析

应该是渲染机制不同，ios上没有复现这个问题

解决办法

如果a元素的字体想要设置行高垂直居中，则可以在外面包一层b，元素设置如下属性

b{
    height:13px;  // a的原高度
    display:flex;
    align-items:center;
}

a{
    font-size:20px;  // 放大两倍字体，如果是数字可能需要微调这个字体大小
    transform:scale(.5)  // 缩小一半
}