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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2810 天前的主题，其中的信息可能已经有所发展或是发生改变。

提问在 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

2017-04-02 19:47:28 +08:00

Chrome 最新版均是 20px ， Chrome Canary 最新版均是 24px

xcatliu

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

2017-04-02 20:20:40 +08:00

windows10
chrome 57.0.2987.133 (64-bit)
font-size 20px
margin 20px

dong3580

2017-04-02 20:42:44 +08:00

windows7
chrome 57.0.2987.110 (64-bit)
font-size 32px
margin 32px

好奇怪，

xcatliu

2017-04-02 20:59:58 +08:00

@dong3580 <html> 的 font-size 如果不能设置为 10px 的话，使用 rem 就比较麻烦，不好计算了。。。

blanu

2017-04-02 21:10:42 +08:00 via iPhone

@xcatliu 能排除是 codepen 的问题吗？ rem 一般是通过 js 动态设置 html 的 font-size 完成的。

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

2017-04-02 21:30:01 +08:00

好吧刚没看清楚。。。我的 Chrome 最小字体大小设置的都是 6 ，改成 12 之后两个版本 Chrome 的 font-size 还是 20 ， margin 变成和楼主一样的 24 了。。。我也觉得这可能是 bug 。。。

windfarer

2017-04-02 22:17:08 +08:00

OSX 10.11.6
Chrome 57.0.2987.133
font-size: 20px
margin: 20px

ChefIsAwesome

2017-04-02 22:27:08 +08:00 via Android

是啊。你就不能拿 10px 放 html 上当一个 em 。我之前就用 20 ，完了弄个 sass 的 mixin 算。后来发现实在太麻烦了，还有好多限制存在，还不如直接拿 px 做单位。我到也从来没有遇到需要全局放大缩小的使用场景，感觉这个 rem 没啥用了

xcatliu

2017-04-02 22:34:23 +08:00 via iPhone

@ChefIsAwesome 有一个我想象中的场景是，类似于一个读小说的网页，页面中提供一个按钮调整字体大小，点了之后直接修改 html 的 font-size 就够了

xcatliu

2017-04-02 22:46:27 +08:00

这个帖子两个小时前我选择了置顶 10 分钟，到现在还是置顶状态 @Livid

xcatliu

2017-04-02 22:52:10 +08:00

@zhangdroid 看来很有可能就是存在这个 bug 了。

感觉 Chrome 内置的反馈没人理啊，有谁知道还有什么其他反馈渠道吗？

xcatliu

2017-04-02 22:54:32 +08:00

@blanu 能够排除是 CodePen 的问题，我是先发现问题，然后才去 CodePen 里面创建示例的。

是做这个的时候发现问题的， top-gap 设置的 1.5rem ，但是计算出来是 18px
http://getmobicss.com/docs/top-gap.html

xcatliu

2017-04-02 22:55:51 +08:00

@dong3580 可能是设置的字体大小最小值是 16px ？可以试试改成 10px 试试？

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

但是我还是觉得这是个 bug ，即使最小字体是 12 ， font-size 和 margin 也不应该有不同的计算结果。

xcatliu

2017-04-02 22:57:02 +08:00

@ChefIsAwesome 也许是该放弃使用 rem 了，确实没感觉到有什么优点

xcatliu

2017-04-02 23:21:59 +08:00

@ChefIsAwesome https://m.taobao.com/ 这个页面是重度使用 rem 的，按钮、图片宽度都是 rem

zhangdroid

2017-04-02 23:33:39 +08:00

@xcatliu 我之前在 https://bugs.chromium.org/p/chromium/issues/list 报过其它 bug ，是有人理的，你可以试试。。。

ChefIsAwesome

2017-04-03 08:44:28 +08:00 via Android

@xcatliu 淘宝那手机页做的那么烂，应该当反面教材了吧

dongoo

2017-04-03 09:16:01 +08:00 via Android

把 html 设置 10px ， chrome 还是会按 12px 计算。
之前好多教程说把 HTML 设置 10px ，然后方便计算，啥啥的...在 chrome 这，那全都是出错的。

为了方便计算要不把 html 设置为 100px

Livid

MOD

2017-04-05 21:02:31 +08:00 via iPhone

@xcatliu 一个处于置顶状态的帖子，如果收到新的回复，置顶时间会延长。

ie88

2017-04-28 09:04:09 +08:00

这个应该是浏览器的 user agent style 吧？
你试试添加 body { margin: 0; padding: 0; }

xcatliu

2017-04-28 11:00:38 +08:00 via iPhone

@ie88 是浏览器的设置限制了最小字体大小

ie88

2017-04-28 15:41:42 +08:00

我 5px 的字体也是正常的呀？

xcatliu

2017-04-28 17:50:26 +08:00

@ie88 可以看看你的 chrome 的设置？
Settings => Show advanced settings => Customize fonts => Minimun font size => 设置为 12 px => 再看看你这个例子？

ie88

2017-04-29 11:42:39 +08:00

@xcatliu

我 chrome 的 minimum font size 默认是 6px，改成 12px 也正常呀