Chrome内核对css中rem大小单位文本font-size处理BUG参考解决方案

搜遍全网没有一篇文章解释为什么,也没有人告诉我要怎么做;

最终我在近期(2017年8月3日)的新项目测试中发现,这个问题越来越严重,只好去实验了与文本相关的css属性;好运的我,找到了,请大家为你的默认重置css中使用

-webkit-text-size-adjust: none;
text-size-adjust: none;

不要让chrome为你的设备优化字体,我只能这么理解了


【之前的研究】

所谓不耻下问,rem这个CSS3的衡量单位是一个早已经出产的东西;但我却是最近才开始学习,以及运用到实际的项目需求中。

chrome.jpg

最近的项目中,我开始对移动端运用rem这个衡量单位。

一个很尴尬的问题出现了,字体并不按照我理想的单位展示;

因为我有一段介绍的文字,我给它设置了换算14px的rem,关于换算,我借助的sass函数计算,完全都不用计算器了。

这段文字,我在使用Chrome浏览器模拟移动端的时候。出现了这个尴尬的问题,字体变大了!相对于前面换算的文字来说,16px换算的大小,反而更大?fuck……哎哟,不该讲脏话。

这不是什么继承问题,也不属于css的继承问题,这是chrome的bug,包括在安卓上预览。更尴尬的是,水果机正常,包括chrome浏览器。

因此,我在项目上折腾了一个多小时,无果,无果……

来一句,无Fuck可说。

最后,我下班了,反正特么都解决不了,容我缓缓。

晚上吃过晚饭以后,开始撸出一堆的测试文本和标签;

h1、h2、li、p、span等等我测了一下,每一个正常的,Bi了Dog。

OK,我再测试,将span设置了display: inline-block,嗯,刷新一下,握草,正常了……正常了……

好吧至少我现在知道display: inline-block就能是所有设备和浏览器正常,好,我不管了,睡觉了。

上图,这是一个测试的截图

Snip20170509_3.png

阅读: 527
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/87

相关阅读

留言评论

2条留言
大谋
还是你这里好看
小杰
谷歌的浏览器还是很强的

精品域名

出售精品域名 Yumi.La ¥5000.00