问一个问题 为什么 我在苹果手机和浏览器还有一个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;
}

答案来源:

https://github.com/o2team/H5Skills/issues/4


···回复:

在部分android的手机中会出现使用line-height文字偏上的问题,可利用padding来实现文字垂直居中,若元素高30px element{font-size: 13px; line-height:0; padding: 15px 0;//相当于line-height 30px }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll Up