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

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

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

@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

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

xcatliu

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

@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

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

dongoo

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

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

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

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

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

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

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