移动端android上line-height不居中的问题
2018-01-30 16:26
260 查看
移动端android上line-height不居中的问题
现在越来越多的移动界面使用rem适配,遇到的坑也随之增加,今天就解决下移动端android上line-height不居中的问题原因:
1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
2.使用rem的单位时造成(根元素如果动态改变时,根元素字体可能不是整数)。
解决方法
网上有好几种,如1.把字号内外边距等设置为需求大小的2倍,使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放,如果是父级自适应高度且可展示多行的,使用transform是有问题的。因为transform缩放是不影响页面布局的。
2.把字号内外边距等设置为需求大小的2倍,使用zoom进行缩放,可以完美解决。
3.把line-height设置为0,使用padding值把元素撑开,说是可以完美解决(经过测试,没有用的!)。
下面不说废话真正解决办法来了
使用
display: table-cell; text-align: center; vertical-align: middle;
1
2
3
这种自适应垂直布局,不懂得自行百度,当然,这种布局和浮动一起使用会失效,怎么解决这个问题,我常用的就是在外面包一个标签,把浮动属性放在此元素上,简单的代码如下:
举例:
.bindBtn {
display: table-cell; text-align: center; vertical-align: middle;width: 3rem;
height: 1.5rem;
font-size: .75rem;
text-align: center;
color: #fff;
border-radius: 0.75rem;
background-color: #f44975;
text-decoration: none;
}
.buyBtn {
display: table-cell; text-align: center; vertical-align: middle;width: 3rem;
height: 1.5rem;
border-radius: 0.75rem;
font-size: 0.6rem;
color: #fff;
background: #666;
}
.float_left {
float: left;
}
<a class="bindBtn" href="javascript:;">已邀请</a> <!--浮动的情况 --> <a class="float_left" style="text-decoration: none;margin-top: 0.5rem;" href="javascript:;"> <span class="buyBtn">购买</span> </a>
具体效果大家可以自己实践下
相关文章推荐
- 移动端android上line-height不居中的问题的解决
- 解决H5页面在部分android版本中line-height不兼容问题
- ie9解决line-height不居中问题-兼容问题
- line-height使文本居中的3像素bug问题
- Android中line-height不居中的解决办法
- line-height不能居中的问题
- 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- 移动端line-height问题
- ie9不支持line-height_ie9不支持字体垂直居中兼容问题解决篇_IE9中字体不能垂直居中解决方法
- 解决input设置line-height不居中的兼容性问题
- 使用css属性line-height实现文字垂直居中的问题
- input框的placeholder使用line-height在Safari上不垂直居中的问题
- 移动端line-height问题
- 垂直居中问题不只有 line-height 可以解决,还有一个哥们叫 margin-top
- android上line-height的问题
- android ListView layout_height属性值引发的问题
- line-height 详解,及个别问题
- line-height在IE6下失效的问题解决办法
- Android解决获取控件Width和Height为0的问题