Android Chrome 上的 line-height 的一个奇怪的坑

2016-10-24 17:38:44 +08:00
 xingo

最近做的一个页面,活不多所以对细节稍微追究了点,碰到个奇怪的问题,上图

上图(左 iphone 6/ios 10.0 ,右 Nexus 6p/Android 7.0/Chrome 53.0 )

(上边标题没有划出来的地方貌似是 ios -webkit-box 的问题)

几乎所有用 px 单位设置过 line-height 的地方, android 都会不由自主的字会向上偏移大概 2px 左右

然而偶尔调试一下,发现设置成line-height: normal;便全部都正常了

上图(左右均 Android ,使用 chrome inspect )

想问问为什么会这样_(:з」∠)_

2898 次点击
所在节点    前端开发
3 条回复
xxxyyy
2016-10-24 18:03:35 +08:00
设成 normal 后计算出来的 line-height 是多少?
xingo
2016-10-25 09:12:29 +08:00
@xxxyyy 设置成 normal computed 里边就是 normal 啊,但我倒是有注意到 因为我手机语言是日文,默认字体是日文字体,会不会是这个的锅

![normal.png]( https://ooo.0o0.ooo/2016/10/25/580eb1207efbf.png)
![19px.png]( https://ooo.0o0.ooo/2016/10/25/580eb120a01d0.png)
xingo
2016-10-25 10:46:02 +08:00
用另一台 Nexus 6 发现没有这样的问题,看来是日文的中文字体的问题了_(:з」∠)_

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/315082

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX