问题描述:用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布局,这种方法便适用。