2014-01-23 81 views
9

我製作了一個網站,其中所有文本都是針對Android平板電腦和移動設備上的某些像素與桌面相比較的。Android和ios中的文本垂直對齊問題

想複製一個小例子。

這裏是我的html代碼:

<body> 
     <h3>MAKING OF</h3> 
</body> 

這裏的CSS代碼:

body { 
    text-align: center; 
    padding-top: 50px; 
} 
html { 
    font-size: 62.5%; 
} 
@font-face { 
    font-family: MPL; 
    src: local("MPL"), 
    url(fonts/MPL.ttf), 
    url(fonts/MPL.eot); 
} 
h3 { 
    font-family: MPL; 
    font-size: 30px; 
    font-size: 3rem; 
    height: 60px; 
    line-height: 60px; 
    padding: 0px 12px; 
    background-color: #5496F2; 
    color: #000; 
} 

可誰知道爲什麼文本無法正確對齊平板電腦的原因。

這裏是右對齊的對桌面瀏覽器 enter image description here

截圖而這裏的問題對平板電腦的瀏覽器 enter image description here

截圖在桌面上,這是雙方在FF和Chrome正常工作,但對Android平板電腦在Chrome瀏覽器上與Chrome瀏覽器錯誤對齊,並且它在ios Safari瀏覽器上無法正常工作。這裏的鏈接:

http://inants.com/kadmos/web/kad/a/a

希望有人將有助於理解這個問題,並會建議最好的解決方案。

謝謝。

回答

-2

您是否嘗試過使用「vertical-align」css屬性?試試this

2

已經遇到過類似的問題。看起來是導致問題的自定義字體。嘗試用通用名稱(如Sans-serif)替換自定義字體。 還不確定如何使用導致問題的相同自定義字體來解決問題。