移动端line-height问题
2017-03-07 23:03
369 查看
转抄:https://www.geek-share.com/detail/2695041379.html
最近碰到了这样一个问题,设置line-height属性让文字垂直居中,发现在PC端肉眼观察是居中的,但是在移动端(Android)上总是发现文字偏上,所以有以下的研究。 搜索发现有人说在Android上会有2px的向上偏移,但是实践证明并不是,下面上图(本来准备制成表格比较起来比较方便,但是发现不能制作表格)
- ios5
上:82px;下:84px; - ios6
上:82px;下:84px; - ios6 plus
上:124px;下:126px; - mi4w
上:118px;下:130px; - 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">
相关文章推荐
- 移动端line-height问题
- 移动端line-height问题
- 移动端android上line-height不居中的问题的解决
- 移动端android上line-height不居中的问题
- IE6中line-height属性失效问题(转)
- line-height 属性的继承问题
- 关于IE6下line-height属性失效问题
- 【转】IE6下Line-height失效问题
- 关于height,line-height导致的样式混乱的问题
- 【转载】解决IE6下的行高line-height失效问题
- line-height在IE6下失效的问题解决办法
- 由img和div的间隙引出:line-height以及vertical-align的问题。
- H5 --(解决)安卓的webview中line-height等于height不垂直居中问题
- IE6、IE7、IE8、FireFox css line-height兼容问题
- 今天学习css发现line-height和vertical-align,和基线等问题
- 垂直居中问题不只有 line-height 可以解决,还有一个哥们叫 margin-top
- 解决H5页面在部分android版本中line-height不兼容问题
- ie9解决line-height不居中问题-兼容问题
- width,height的问题,span中line-height和padding区别
- 关于css中 line-height 在ie中和在chrome中错位的问题