移动端line-height问题

Posted 2020-09-03 黑客

转抄：http://blog.csdn.net/wjnf012/article/details/54316058


最近碰到了这样一个问题，设置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; 
目前只发现这个方法，没有发现其他的方法，有新的方法将更新，欢迎大家指正。

 

或者：

关于line-height大家应该非常熟悉了吧，就是用来做垂直居中的，屡试不爽，基本上没有什么问题，但是最近一个项目，测试提了一个bug，看图吧。

从别处窃的图，这个问题只有安卓上才能复现，做了demo，发现应该是font-size的问题，你们可以自己试试，font-size为13px或者奇数时，line-height会有一定的偏差，在safari上没有问题，至于原因，现在还没找到，等找到了再来补充吧。

解决办法

虽然原因没有找到，但是可以大致猜出是安卓上奇数字号导致line-height均分上下边距的时候出现了偏差，那么，我们就可以通过这方面入手。

既然line-height均分不了，那就抛弃line-height吧，看代码

element{
 
　　font-size: 13px;
 
　　line-height:0;
 
　　padding: 15px 0;//相当于line-height 30px
 
}

 

很简单吧，将line-height设为0，用padding来进行填充，完美实现，自测没什么问题，如果造成其他问题，欢迎留言指出

 

<meta name="wap-font-scale" content="no">