V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
xcatliu
V2EX  ›  CSS

发现 css 中 rem, font-size 和 margin 的一个 bug,能帮我测试下吗?

  •  
  •   xcatliu ·
    xcatliu · 2017-04-02 19:39:12 +08:00 · 4363 次点击
    这是一个创建于 2552 天前的主题,其中的信息可能已经有所发展或是发生改变。
    提问在 http://stackoverflow.com/q/43003484/2777142

    将 html 的 font-size 设为 10px
    p 的 font-size 设为 2rem ,渲染结果为 20px
    p 的 margin 设为 2rem ,渲染结果为 24px

    有人给了一个回答,说是 chrome 版本问题,已经在最新版本中修复了。
    可是我将 chrome 升级为和他一样的版本,依然有问题。

    能帮我测试下吗?

    看看 这个 CodePen 的 font-size 和 margin 即可
    https://codepen.io/anon/pen/peKKZY
    第 1 条附言  ·  2017-04-02 20:34:36 +08:00
    Chrome 中有个最小字体设置,网络内容 => 自定义字体 => 最小字号
    如果我将它调整成 10 ,则 font-size 和 margin 都可以正确的计算为 20px 了。

    但是我还是觉得这是个 bug ,即使最小字体是 12 , font-size 和 margin 也不应该有不同的计算结果。
    第 2 条附言  ·  2017-04-02 20:41:10 +08:00
    在 Chrome 内置的反馈渠道反馈过一次,不过后来就没后续了。是不是该上全球工单系统了?
    26 条回复    2017-04-29 11:42:39 +08:00
    blanu
        1
    blanu  
       2017-04-02 19:47:28 +08:00   ❤️ 1
    Chrome 最新版均是 20px , Chrome Canary 最新版均是 24px
    xcatliu
        2
    xcatliu  
    OP
       2017-04-02 19:50:02 +08:00
    macOS Sierra 10.12.2 (16C67)
    Chrome 57.0.2987.133 (64-bit)
    font-size 20px
    margin 24px
    giuem
        3
    giuem  
       2017-04-02 20:20:40 +08:00   ❤️ 1
    windows10
    chrome 57.0.2987.133 (64-bit)
    font-size 20px
    margin 20px
    dong3580
        4
    dong3580  
       2017-04-02 20:42:44 +08:00   ❤️ 1
    windows7
    chrome 57.0.2987.110 (64-bit)
    font-size 32px
    margin 32px

    好奇怪,
    xcatliu
        5
    xcatliu  
    OP
       2017-04-02 20:59:58 +08:00
    @dong3580 <html> 的 font-size 如果不能设置为 10px 的话,使用 rem 就比较麻烦,不好计算了。。。
    blanu
        6
    blanu  
       2017-04-02 21:10:42 +08:00 via iPhone
    @xcatliu 能排除是 codepen 的问题吗? rem 一般是通过 js 动态设置 html 的 font-size 完成的。
    zhangdroid
        7
    zhangdroid  
       2017-04-02 21:17:29 +08:00
    macOS 10.12.4 (16E195)下 Version 57.0.2987.133 (64-bit) 和 Version 59.0.3060.0 canary (64-bit) 的 Chrome 测了下 font-size 和 margin 都是 20px
    zhangdroid
        8
    zhangdroid  
       2017-04-02 21:30:01 +08:00   ❤️ 1
    好吧刚没看清楚。。。我的 Chrome 最小字体大小设置的都是 6 ,改成 12 之后两个版本 Chrome 的 font-size 还是 20 , margin 变成和楼主一样的 24 了。。。我也觉得这可能是 bug 。。。
    windfarer
        9
    windfarer  
       2017-04-02 22:17:08 +08:00
    OSX 10.11.6
    Chrome 57.0.2987.133
    font-size: 20px
    margin: 20px
    ChefIsAwesome
        10
    ChefIsAwesome  
       2017-04-02 22:27:08 +08:00 via Android   ❤️ 1
    是啊。你就不能拿 10px 放 html 上当一个 em 。我之前就用 20 ,完了弄个 sass 的 mixin 算。后来发现实在太麻烦了,还有好多限制存在,还不如直接拿 px 做单位。我到也从来没有遇到需要全局放大缩小的使用场景,感觉这个 rem 没啥用了
    xcatliu
        11
    xcatliu  
    OP
       2017-04-02 22:34:23 +08:00 via iPhone
    @ChefIsAwesome 有一个我想象中的场景是,类似于一个读小说的网页,页面中提供一个按钮调整字体大小,点了之后直接修改 html 的 font-size 就够了
    xcatliu
        12
    xcatliu  
    OP
       2017-04-02 22:46:27 +08:00
    这个帖子两个小时前我选择了置顶 10 分钟,到现在还是置顶状态 @Livid
    xcatliu
        13
    xcatliu  
    OP
       2017-04-02 22:52:10 +08:00
    @zhangdroid 看来很有可能就是存在这个 bug 了。

    感觉 Chrome 内置的反馈没人理啊,有谁知道还有什么其他反馈渠道吗?
    xcatliu
        14
    xcatliu  
    OP
       2017-04-02 22:54:32 +08:00
    @blanu 能够排除是 CodePen 的问题,我是先发现问题,然后才去 CodePen 里面创建示例的。

    是做这个的时候发现问题的, top-gap 设置的 1.5rem ,但是计算出来是 18px
    http://getmobicss.com/docs/top-gap.html
    xcatliu
        15
    xcatliu  
    OP
       2017-04-02 22:55:51 +08:00
    @dong3580 可能是设置的字体大小最小值是 16px ?可以试试改成 10px 试试?

    Chrome 中有个最小字体设置,网络内容 => 自定义字体 => 最小字号
    如果我将它调整成 10 ,则 font-size 和 margin 都可以正确的计算为 20px 了。

    但是我还是觉得这是个 bug ,即使最小字体是 12 , font-size 和 margin 也不应该有不同的计算结果。
    xcatliu
        16
    xcatliu  
    OP
       2017-04-02 22:57:02 +08:00
    @ChefIsAwesome 也许是该放弃使用 rem 了,确实没感觉到有什么优点
    xcatliu
        17
    xcatliu  
    OP
       2017-04-02 23:21:59 +08:00
    @ChefIsAwesome https://m.taobao.com/ 这个页面是重度使用 rem 的,按钮、图片宽度都是 rem
    zhangdroid
        18
    zhangdroid  
       2017-04-02 23:33:39 +08:00
    @xcatliu 我之前在 https://bugs.chromium.org/p/chromium/issues/list 报过其它 bug ,是有人理的,你可以试试。。。
    ChefIsAwesome
        19
    ChefIsAwesome  
       2017-04-03 08:44:28 +08:00 via Android
    @xcatliu 淘宝那手机页做的那么烂,应该当反面教材了吧
    dongoo
        20
    dongoo  
       2017-04-03 09:16:01 +08:00 via Android
    把 html 设置 10px , chrome 还是会按 12px 计算。
    之前好多教程说把 HTML 设置 10px ,然后方便计算,啥啥的...在 chrome 这,那全都是出错的。

    为了方便计算要不把 html 设置为 100px
    Livid
        21
    Livid  
    MOD
       2017-04-05 21:02:31 +08:00 via iPhone
    @xcatliu 一个处于置顶状态的帖子,如果收到新的回复,置顶时间会延长。
    ie88
        22
    ie88  
       2017-04-28 09:04:09 +08:00
    这个应该是浏览器的 user agent style 吧?
    你试试添加 body { margin: 0; padding: 0; }
    xcatliu
        23
    xcatliu  
    OP
       2017-04-28 11:00:38 +08:00 via iPhone
    @ie88 是浏览器的设置限制了最小字体大小
    ie88
        24
    ie88  
       2017-04-28 15:41:42 +08:00   ❤️ 1

    我 5px 的字体也是正常的呀?
    xcatliu
        25
    xcatliu  
    OP
       2017-04-28 17:50:26 +08:00
    @ie88 可以看看你的 chrome 的设置?
    Settings => Show advanced settings => Customize fonts => Minimun font size => 设置为 12 px => 再看看你这个例子?
    ie88
        26
    ie88  
       2017-04-29 11:42:39 +08:00
    @xcatliu

    我 chrome 的 minimum font size 默认是 6px,改成 12px 也正常呀
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1095 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:51 · PVG 02:51 · LAX 11:51 · JFK 14:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.