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

Can I use?

Less

Cool Libraries

This topic created in 3327 days ago, the information mentioned may be changed or developed.

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

Supplement 1 Apr 2, 2017

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

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

Supplement 2 Apr 2, 2017

在 Chrome 内置的反馈渠道反馈过一次，不过后来就没后续了。是不是该上全球工单系统了？

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

blanu

Apr 2, 2017

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

xcatliu

Apr 2, 2017

macOS Sierra 10.12.2 (16C67)
Chrome 57.0.2987.133 (64-bit)
font-size 20px
margin 24px

giuem

Apr 2, 2017

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

dong3580

Apr 2, 2017

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

好奇怪，

xcatliu

Apr 2, 2017

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

blanu

Apr 2, 2017 via iPhone

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

zhangdroid

Apr 2, 2017

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

Apr 2, 2017

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

windfarer

Apr 2, 2017

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

ChefIsAwesome

Apr 2, 2017 via Android

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

xcatliu

Apr 2, 2017 via iPhone

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

xcatliu

Apr 2, 2017

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

xcatliu

Apr 2, 2017

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

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

xcatliu

Apr 2, 2017

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

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

xcatliu

Apr 2, 2017

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

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

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

xcatliu

Apr 2, 2017

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

xcatliu

Apr 2, 2017

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

zhangdroid

Apr 2, 2017

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

ChefIsAwesome

Apr 3, 2017 via Android

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

dongoo

Apr 3, 2017 via Android

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

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

Livid

MOD

PRO

Apr 5, 2017 via iPhone

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

ie88

Apr 28, 2017

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

xcatliu

Apr 28, 2017 via iPhone

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

ie88

Apr 28, 2017

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

xcatliu

Apr 28, 2017

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

ie88

Apr 29, 2017

@xcatliu

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