2014-01-23 15 views
9

Ich habe eine Website, wo alle Texte für einige Pixel in Android Tablet und Handy im Vergleich zum Desktop gemacht.Text vertikale Ausrichtung Problem in Android und iOS

Möchten Sie ein kleines Beispiel kopieren.

Hier ist mein HTML-Code:

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

Hier ist die CSS-Code:

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; 
} 

jemand mag der Grund, warum der Text nicht richtig auf Tablet ausgerichtet ist.

Hier ist der Screenshot der rechten Ausrichtung auf Desktop-Browser enter image description here

Und hier ist der Screenshot des Problems auf Tablet-Browser enter image description here

Auf Desktop dies richtig sowohl in FF und Chrome, arbeitet aber auf Android-Tablet ist falsch ausgerichtet wie in Chrome als auf FF-Browsern, auch funktioniert es nicht richtig auf Safari-Browser. Hier ist der Link:

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

Hoffnung jemand helfen, dieses Problem zu verstehen und die beste Lösung vorschlagen.

Danke.

Antwort

-2

Haben Sie versucht, tatsächlich die CSS-Eigenschaft "vertical-align" zu verwenden? Versuchen Sie this.

2

Habe ein ähnliches Problem konfrontiert. Scheint, die benutzerdefinierte Schriftart zu sein, die das Problem verursacht. Versuchen Sie, die benutzerdefinierte Schriftart durch etwas Generisches wie Sans-Serif zu ersetzen. Noch nicht sicher, wie Sie das Problem beheben, indem Sie dieselbe benutzerdefinierte Schriftart verwenden, die das Problem verursacht.