我製作了一個網站,其中所有文本都是針對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;
}
可誰知道爲什麼文本無法正確對齊平板電腦的原因。
這裏是右對齊的對桌面瀏覽器
截圖而這裏的問題對平板電腦的瀏覽器
截圖在桌面上,這是雙方在FF和Chrome正常工作,但對Android平板電腦在Chrome瀏覽器上與Chrome瀏覽器錯誤對齊,並且它在ios Safari瀏覽器上無法正常工作。這裏的鏈接:
http://inants.com/kadmos/web/kad/a/a
希望有人將有助於理解這個問題,並會建議最好的解決方案。
謝謝。