H5Skills
H5Skills copied to clipboard
o2team
解决 Android 浏览器下 line-height 垂直居中偏离问题
移动端网页开发中，经常会涉及到一些小按钮或者小标签，比如这种：
对于一般 PC 浏览器以及 iOS 设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离，如下图所示：
测试表明，字体字号为奇数的两倍时（比如 10px、14px、18px、22px、26px），会出现严重偏移现象。
其实系统之间效果的差异跟我们的字体类型、系统排版引擎、浏览器都有关系，其实不影响用户浏览与操作等体验，我们可以忽略这些问题，对于一些居于使用场景偏离的比较明显的，可以使用下面提到的两种处理方案。
方案一：
我们可以通过 transform: scale 来处理，比如，字体大小是 8px，我们把字体设定为 16px，然后通过 scale(0.5) 缩放至一倍大小，简单粗暴。
注意：放大两倍会使得容器被撑开占位。
方案二：
结合行高、对齐的关系，结合伪元素得出的黑科技，亲测效果很理想。
.jd::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-top: 1px;
}
.download__list-item-status {
position: absolute;
top: -1px;
right: 20px;
min-width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 26px;
padding: 0 20px;
color: #02bb00;
font-weight: bold;
border-radius: 60px;
border: 1px solid transparent; // hack android 文字垂直居中偏上
display: inline-block;
-webkit-transform: scale(0.5); // hack 先放大 2x 在缩小0.5
transform: scale(0.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
&:before{ // hack 为了 hack 而占用的描边属性
position: absolute;
top: 0;
right: 0;
content: '';
width: 100%;
height: 100%;
border: 2px solid #02bb00;
display: inline-block;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
border-radius: 60px;
}
}
试了下，安卓上line-height:normal,也可以上下居中。
请问你是怎么设置的呢？当元素有 height 的时候，我设置 line-height:normal 无效。没 height 的时候确实可以
试了下，安卓上line-height:normal,也可以上下居中。
请问你是怎么设置的呢？当元素有 height 的时候，我设置 line-height:normal 无效。没 height 的时候确实可以
用楼主说的方法，或者换成button标签试试。
.text-box {
height: 14px;
display: flex;
align-items: center;
}
几个月下来，感觉用line height垂直居中简直体验差，不同设备百花齐放。但是 align-items: center; 就基本各端一致了。缺点就是只能用flexbox，像ellipsis这样溢出点点点就不能用了，可以尝试在外面套一层容器来实现，值不值得看业务吧。。
试了下，安卓上line-height:normal,也可以上下居中。
和
display flex
align-items center
justify-content center
搭配好用
display: flex align-items: center justify-content: center line-height: normal
这么写是OK的
父级是flex布局的话， display flex align-items center justify-content center
在试试给子元素添加android-text-hack样式
// 兼容安卓机型文本垂直居中对不齐问题
.android-text-hack {
&::after {
display: inline-block;
width: 0;
content: '齐';
opacity: 0;
}
}
