V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xingo
V2EX  ›  前端开发

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

  •  
  •   xingo · 2016-10-24 17:38:44 +08:00 · 2962 次点击
    这是一个创建于 2952 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    ios/Android 对比

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

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

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

    上图(左右均 Android ,使用 chrome inspect ) line-height 对比 1 line-height 对比 2

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

    3 条回复    2016-10-25 10:46:02 +08:00
    xxxyyy
        1
    xxxyyy  
       2016-10-24 18:03:35 +08:00 via Android
    设成 normal 后计算出来的 line-height 是多少?
    xingo
        2
    xingo  
    OP
       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
        3
    xingo  
    OP
       2016-10-25 10:46:02 +08:00
    用另一台 Nexus 6 发现没有这样的问题,看来是日文的中文字体的问题了_(:з」∠)_
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2818 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:37 · PVG 16:37 · LAX 00:37 · JFK 03:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.