首页 > 手持设备浏览器对line-height垂直居中的渲染差异如何解决

手持设备浏览器对line-height垂直居中的渲染差异如何解决

对line-height属性没有很好的理解,今日在各手机浏览器下观察到的一个问题望诸位指点:
备注说明:
1.目标是使倒计时模块中的文案垂直居中;
2.测试图片均来源于三星Galaxy Note3;
3.PC端使用chrome模拟各手持设备居中显示良好;
4.line-height试过加import提高优先级,无效,故应不是优先级问题;
5.若使用padding做到居中,在iphone和安卓下渲染完全不同,此方案不行;
6.很早的一篇文章,但好像没有好的解决方案http://www.css88.com/archives/1304

示例一:上图为火狐下的显示结果

示例二:上图为微信内置浏览器、opear、qq等浏览器的显示结果

示例三:上图为chrome下的显示结果,亦为理想结果

补充:
测试发现三星Galaxy Note3中有上述问题,而小米没有,经同事提醒可能问题不在line-height而在不同手机不同浏览器的字体上

附:
https://www.zhihu.com/question/39516424 第一个答案可以解决问题


你的代码可以弄上来吗


同问 顶一下....

【热门文章】
【热门文章】