我觉得这个其实渲染引擎的问题,ios一般是没问题的,但是android上会出现这样的问题,不管是微信小程序还是手机浏览器,我都有遇到过。我在微信小程序中的解决方法是单独针对android处理(比较麻烦一点,android上使文字垂直居中,但是它一般会向上偏移几个像素,那么就在android的机型上让它向下移几个像素): [代码]// 获取系统信息[代码] [代码]wepy.getSystemInfo().then(res => {[代码] [代码]this[代码][代码]._system_ = !!~res.system.indexOf([代码][代码]'Android'[代码][代码]) ? [代码][代码]'android'[代码] [代码]: [代码][代码]'ios'[代码] [代码]// eslint-disable-line[代码] [代码]this[代码][代码].$apply()[代码] [代码]})[代码][代码]/* 单独处理 */[代码][代码].vertical-text {[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码]}[代码][代码].vertical-text.system-android {[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]36[代码][代码]rpx;[代码][代码]}[代码]
文字垂直居中在Android机型表现不一致[图片] 类似图片文字,在模拟器中设置文字垂直居中,垂直效果能实现。在ios机型上也是有效果的,但是在安卓系统的手机上,垂直居中效果未能实现,不同安卓手机会出现偏上或者偏下效果。求指点该如何设置样式,确保能适配不同的安卓机型?
2018-10-11