移动端line-height问题

最近碰到了这样一个问题,设置line-height属性让文字垂直居中,发现在PC端肉眼观察是居中的,但是在移动端(Android)上总是发现文字偏上,所以有以下的研究。
搜索发现有人说在Android上会有2px的向上偏移,但是实践证明并不是,下面上图(本来准备制成表格比较起来比较方便,但是发现不能制作表格)

  1. ios5
    这里写图片描述
    上:82px;下:84px;
  2. ios6
    这里写图片描述
    上:82px;下:84px;
  3. ios6 plus
    这里写图片描述
    上:124px;下:126px;
  4. mi4w
    这里写图片描述
    上:118px;下:130px;
  5. vivo
    这里写图片描述
    上:58px;下:64px;

经过实际操作发现,ios系统上上下相差两个像素(也有可能是我测距离的误差)
但是Android上相差比较大,而且不同的机型相差数目不一样

产生原因

问了下技术大神,说是line-height对一部分Android手机不起作用,有自己默认的行高,默认行高为22px(这点我没有试验,不知道是否准确)

解决方法

line-height:normal;
padding:10px 0;

目前只发现这个方法,没有发现其他的方法,有新的方法将更新,欢迎大家指正。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值