移動端line-height問題

轉抄：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">