V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Sponsored by
二向箔安全
​一对一的线上 web 安全培训服务
咨询微信:twosecurityrefer
Promoted by 二向箔安全
V2EX  ›  CSS

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

  •  
  •   xcatliu · 257 天前 · 1326 次点击
    这是一个创建于 257 天前的主题,其中的信息可能已经有所发展或是发生改变。
    提问在 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 条附言  ·  257 天前
    Chrome 中有个最小字体设置,网络内容 => 自定义字体 => 最小字号
    如果我将它调整成 10 ,则 font-size 和 margin 都可以正确的计算为 20px 了。

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

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

    感觉 Chrome 内置的反馈没人理啊,有谁知道还有什么其他反馈渠道吗?
        14
    xcatliu   257 天前
    @blanu 能够排除是 CodePen 的问题,我是先发现问题,然后才去 CodePen 里面创建示例的。

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

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

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

    为了方便计算要不把 html 设置为 100px
        21
    Livid   V2EX Moderator   254 天前 via iPhone
    @xcatliu 一个处于置顶状态的帖子,如果收到新的回复,置顶时间会延长。
        22
    ie88   231 天前
    这个应该是浏览器的 user agent style 吧?
    你试试添加 body { margin: 0; padding: 0; }
        23
    xcatliu   231 天前 via iPhone
    @ie88 是浏览器的设置限制了最小字体大小
        24
    ie88   231 天前   ♥ 1

    我 5px 的字体也是正常的呀?
        25
    xcatliu   231 天前
    @ie88 可以看看你的 chrome 的设置?
    Settings => Show advanced settings => Customize fonts => Minimun font size => 设置为 12 px => 再看看你这个例子?
        26
    ie88   230 天前
    @xcatliu

    我 chrome 的 minimum font size 默认是 6px,改成 12px 也正常呀
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   608 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 63ms · UTC 23:19 · PVG 07:19 · LAX 15:19 · JFK 18:19
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1