Mobile-Line-height Issues

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


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

1. iOS5
   
   On: 82px; under: 84px;
2. Ios6
   
   On: 82px; under: 84px;
3. IOS6 Plus
   
   On: 124px; under: 126px;
4. mi4w
   
   On: 118px; under: 130px;
5. Vivo
   
   On: 58px; under: 64px;

The actual operation found that the iOS system up and down two pixels (also may be the error of my distance measurement)
But android on the difference between the larger, and different models vary the number of

Cause

Asked the technical great God, said is Line-height on part of Android phone does not work, has its own default row height, the default row height is 22px (this I did not experiment, do not know whether accurate)

Workaround

line-height:normal; 
padding:10px 0;
Currently only found this method, did not find other methods, there are new methods will be updated, please correct me.

Or:

About line-height Everyone should be very familiar with it, is used to do vertical centering, tried, basically no problem, but a recent project, the test has introduced a bug, look at the picture bar.

Stolen from elsewhere, this problem only on Android can be reproduced, do a demo, found should be font-size problem, you can try it yourself, font-size 13px or odd, line-height will have a certain deviation, there is no problem in Safari, As for the reasons, have not been found, and so found to add.

Solutions

Although the reason is not found, but can be roughly guessed that the Andros number causes the line-height to divide the upper and lower margins when there is a deviation, then we can start with this.

Since line-height is not evenly divided, then abandon Line-height bar, see the code

element { font-size: 13px; line-height:0; padding: 15px 0; }

Very simple, will line-height set to 0, with padding to fill, perfect realization, self-test no problem, if cause other problems, welcome message points out

<name= "Wap-font-scale"  content= "No">

Mobile-Line-height Issues