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

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

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

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

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

--目前测试,在安卓上的低版本chrome内核(测试低于40的版本异常)上,还是会随机出现文字大小异常--


【之前的研究】

所谓不耻下问,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

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

相关阅读

留言评论

2条留言
大谋
还是你这里好看
小杰
谷歌的浏览器还是很强的
关于各种NPM问题,推荐使用Yarn,安装速度快,没用各种奇葩的错误,方便快捷。
收集的NodeJS代码片段: NodeJS Tools

最新留言

  • soshine 在《ZBlogPHP外链插件免费送!独家免费插件!》中留言
    很好的插件,如果能更自动化一点就好了,自动将淘宝客外链转换成对应的文章ID形式。
  • 橙色阳光 在《纯Javascript实现淡入淡出效果》中留言
    讲真,我现在的淡入淡出都是用css3+setTimeout了,用这个方案也是当年的一些想法。
  • 橙色阳光 在《基于jQuery的简易幻灯插件 - OsSliderJS》中留言
    讲真,这段JS大家不要看了……
  • BeautifulDays 在《三年了,我依然还在》中留言
    兴趣变工作,工作成为一种乐趣。这也蛮好的啊,工作之余可以在优化自己的博客,在博客上分享自己的一些心得、知识,毕竟,博客,现在已经越来越多的被今日头条,新浪微博,腾讯微博、微信公众号等第三方自营体APP取代了。能坚持下去的真不容易。给你一个赞!
  • 柒柒 在《移动端Touch事件preventDefault以后影响click事件触发的不科学解决方案》中留言
    先赞再说
  • 大谋 在《Chrome内核对css中rem大小单位文本font-size处理BUG参考解决方案》中留言
    还是你这里好看