H5 --(解決)安卓的webview中line-height等於height不垂直居中問題
阿新 • • 發佈:2019-01-05
問題描述:用rem適配的H5頁面在安卓的webview中,當line-height等於height時,有時會稍微偏上一些,不能垂直居中(ps:ios上沒有這個問題)
1、分析原因:由於用rem作適配,則根元素的字型大小可能不是整數,然後將元素的字型大小設定為rem為單位時,字型實際的大小若以px為單位則可能是奇數(更可能並不是整數);且當字型大小小於12px時,安卓webview中的瀏覽器為了避免奇數font-size帶來的偏差,自動設定成了偶數,所有會有一些偏上。
2、解決思路
<1> 改變字型大小使其大於12px
改變字型大小讓它大於12 px(擴大2倍),將字型盒子的盒子相關屬性(寬度、高度、行高、內邊距、圓角、字型大小等)設定為需求大小的 2 倍,再使用transform進行縮放 0.5 倍,此時字型大小已大於12px,能夠正常居中。
.btn { float: right; width: 1.62rem *2; height: .64rem *2; line-height: .64rem *2; text-align: center; border-radius: 2rem *2; font-size: .28rem *2; color: #282624; letter-spacing: 0; margin: .28rem -1.22rem 0 0; // 安卓webview中line-height不垂直居中問題 transform: scale(0.5); transform-origin: 0% 0%; }
最佳實踐:適用於單個或者是一排的佈局。當為多行或者列表時,因為transform縮放是不影響頁面佈局的,需用定位將字型盒子進行脫標才行。
<2> 使用自適應表格佈局 - - table佈局
由於table佈局和浮動一起使用會失效,所以在字型盒子外在包一層盒子,將浮動應用在此外層盒子上即可。
.outer { /* 外層盒子進行浮動 */ float: left; } .inner { font-size: 10px; /* 字型大小小於12px的內層盒子進行表格佈局 */ display: table-cell; vertical-align: middle; text-align: center; }
最佳實踐:只要相容table佈局,這種方法便適用。